布団の中にいたい

Androidアプリ開発の勉強をしている傍らで、elasticsearchとかをいじってみたりしています。最近は数学の勉強が楽しくなってきました。

vueでtextareaでtabを入力できるようにする

vueでtextareaを使うようなアプリケーションを作っていて、tab入力どうすればいいんだと思ったのでメモ。

基本的なやり方はjQueryでやる場合と同じで、textarea内のtabによるkeydownイベントをトリガーにして、既存の入力に\tを付け足して上書きすればいいだけです。

vueによるkeydownイベントの発火検知は、v-onディレクティブを使うことでできます。keyイベントのようなよく発生するイベントに対してはシンタックスシュガーがあってとても便利です。

以下がシンタックスシュガーを使わない版

<textarea v-on:keydown.9="実行する関数"></textarea>

シンタックスシュガーを使った版。わざわざkeyイベントの番号を指定するのも何なのでこちらのほうがいいと思います。

<textarea @keydown.tab="実行する関数"></textarea>

あとは、jQueryでやる場合と同じく\tで上書きすればいいだけです。こちらについては調べれば記事がたくさん出てくるのでそちらを見たほうがよいかと。

参考にしたのは以下です。

horicdesign.com

まとめ

便利なvueの機能のおかげで思ったよりも簡単にタブ入力ができるようになりました。調べ始めた時はjQueryでやるしかないのかと一瞬怯みましたが、vueで実現できてよかったです。 vueの細かい部分については以下のドキュメントを参考にしたので、他のことをやってみたいは見てみるといいかと思います。

jp.vuejs.org

Firebase hostingにvueのアプリケーションをデプロイする

普段はAWSを使っていて、ちょっとしたアプリケーションであれば、S3において外部からアクセスできるようにしてました。今回、ちょっとした事情でGCPを使わないといけなくなったので、同等のことができそうということで、Firebase hostingを使ってみました。

Firebase hostingはざっくり言うと、静的サイトをお手軽に公開できるサービスです。ざっくりしすぎですかね。詳細は公式のページを参照したほうがいいです。

firebase.google.com

今回はvueで作ったちょっとしたアプリケーションをFirebase hostingで動かしてみました。手順は以下。既に動かすアプリケーションはあるという前提です。

  1. firebaseでプロジェクトを作成
  2. firebase-toolsをインストール
  3. デプロイするアプリケーションのディレクトリを指定
  4. デプロイ

firebaseでプロジェクトを作成

firebaseのコンソールからプロジェクトを作成できるので、作成してください。

firebase-toolsをインストール

npmでfirebase-toolsをインストールします。

$ npm install -g firebase-tools

次にCLI経由でfirebaseにログインします

$ firebase login

コマンドを実行したら、認証用のページに飛ぶので認証してください。

デプロイするアプリケーションのディレクトリを指定

デプロイしたアプリケーションのルートで以下のコマンドを実行します。

$ firebase init

実行するとfirebase用の設定ファイルが生成されます。生成されるのは以下2つ。

  • firebase.json
  • .firebaserc

次に、firebase.jsonにデプロイするディレクトリを指定します。今回はpublicというディレクトリを指定します。

{
    "hosting": {
        "public": "public"
    }
}

デプロイ

以下のコマンドを実行するとデプロイされます。

$ firebase deploy

実行するとHosting URLが表示されるので、そこにアクセスすればデプロイしたアプリケーションを参照できます。

まとめ

実際書いたもののvueの要素は皆無ですね。まぁ、webpackでbuildしたものをデプロイすればいいだけなので、大した手間はないので、実際やってみるといいかと。個人的にはS3でやるよりお手軽だったので、ちょっとしたことするなら今後もFirebase hostingを使いましょうかね。

vuejsでscssを使う

自分の作っているアプリのcssが散らかってきたので、scssなりなんなりで整理したいなーと思って調べてのでメモ。

私の環境は、vue-cliのwebpackのテンプレートで作ったものなので、それ準拠で。

やることは以下の3つ

  1. loaderのインストール
  2. vue-loaderのオプションにscssのloaderを設定
  3. scssを書く

loaderのインストール

まずは、scssのためのloaderをインストールします。

npm install sass-loader node-sass --save-dev

簡単

vue-loaderのオプションにscssのloaderを設定

css自体はvueファイルに書いているので、vue-loaderのオプションでscssのloaderを設定します。といっても、vue-cliのwebpackテンプレートで作ったものについては、デフォルトで記述されていました。

以下その部分。

// build/utils.js
// https://vue-loader.vuejs.org/en/configurations/extract-css.html                                                                                                                                             
return {                                                                                                                                                                                                       
  css: generateLoaders(),                                                                                                                                                                                      
  postcss: generateLoaders(),                                                                                                                                                                                  
  less: generateLoaders('less'),                                                                                                                                                                               
  sass: generateLoaders('sass', { indentedSyntax: true }),                                                                                                                                                     
  scss: generateLoaders('sass'),                                                                                                                                                                               
  stylus: generateLoaders('stylus'),                                                                                                                                                                           
  styl: generateLoaders('stylus')                                                                                                                                                                                                                                                                                                                                                                                           
}                               

なので、特にやることは無し。

scssを書く

vueの<style>の部分を<style lang="scss">と書いて、scssを書いていけば大丈夫です。とても楽。

まとめ

vueでscssを使う方法を簡単に調べてみました。今回はvue-cliのwebpackテンプレートを使っていたので、大してやることはなかったですが、自分で一からやろうと思うと若干面倒かもしれないです。細かい説明については、vue-loaderのドキュメントに色々書いてあるので一度読んでみるといいと思います。

github.com

bootstrap4のnavbarの位置を固定する

bootstrap4を使っていて、スクロールした時にnavbarを上に固定したかったのでやり方をメモ。

基本的にはclassにfixed-***をつければいい。

上部に固定は以下

<nav class="nav fixed-top">
  <a>上に固定</a>
</nav>

ついでに下に固定も

<nav class="nav fixed-bottom">
    <a>下に固定</a>
</nav>

細かいドキュメントは以下

getbootstrap.com

軽いノリでプルリク投げたらmergeされた話

今年のぼんやりとした目標で、何かしらの他人のプロダクトにプルリクを投げようと考えていたのですが、年始にgithub trendingに上がっていたプロダクトにノリでプルリク投げたら5分かからずmergeされてしまいました。

プルリクを投げたのは以下。

github.com

facはコンフリクトを解消するためのツールで、ちょうど大量のコンフリクトに悩んでいた私としては使わずにはいられないものでした。実際に使ってみても便利だと思ったので何かしら貢献できないかと考えプルリクを投げてみました。

内容は至極単純で、constで連続した番号を定義している部分をiotaで書き換えただけです。

まぁ何が言いたいかというと、軽いノリでプルリクを投げてもmergeしてくれることがあるみたいなので、みなさんもプルリク投げてみましょう。

「Kotlin Webアプリケーション 新しいサーバサイドプログラミング」を読んだ

年末年始休み中で時間がまとまって取れるタイミングで積んでいる本を消化しています。

昨日から今日にかけて「Kotlin Webアプリケーション 新しいサーバサイドプログラミング」を読んだのでざっくり感想を。

Kotlin Webアプリケーション 新しいサーバサイドプログラミング

Kotlin Webアプリケーション 新しいサーバサイドプログラミング

前提として、私自身のKotlinの習熟度は、趣味でKotlinを使ってandroidアプリを作っている程度で、まぁ趣味の範囲でそこまで詳しくないです。

構成

全部で三部構成で章立ては以下のようになっています。

  1. Kotlin入門
  2. 簡単なWebアプリ
  3. 少し本格的なWebアプリ

第一部については、「Kotlin スタートブック」を持っていたので、そこまで注意して読んではいないので何かしら感想は言えないです。ある程度文法が分かるのであれば、必要になった時に読めばいいかと。

Kotlinスタートブック -新しいAndroidプログラミング

Kotlinスタートブック -新しいAndroidプログラミング

第二部・第三部については、sparkやSpring BootといったWebフレームワークを使って、Todoリストを作ってみようというものです。第三部に関しては作って、テスト書いて、デプロイまで書かれているので一通り学べるので入門として非常にありがたかったです。

感想

kotlinを使用して、Webアプリケーションを開発する場合の概観がわかるので個人的には買ってよかったと思います。普段ちょっとしたものを作るときは、pythonでflaskを使って書くか、golangでnet/httpを使って書くかしていましたが、記述量・型の有無を考えた時にotlinを使っても全然問題なさそうなので、個人プロダクトでちょいちょい使ってみようかと思います。

2018年の抱負

あけましておめでとうございます。今年もポツポツ書いていこうと思います。

去年は色々あって、年始に極端に落ち込んでそこから立ち直るのに時間がかかってしまったという印象なので、今年は落ち込まないようにゆるゆるやっていきつつ、何かしら目標を立てて進めていければと思います。

あと、去年末に思ったことですが、その年の目標を最後の最後まで覚えきれていなかったので、もう少し期間を区切って考えていこうと思います。達成できるかはわかりませんが。

なので、目標は継続的に目標を立てて消化していくです。大枠で目標を立てつつ細かい目標を消化していくイメージで乗り切っていこうかと思います。

大枠で達成しようとしているものは以下ぐらいですかね。

  1. 英語
  2. 自分のプロダクト作り
  3. コンペへの参加

英語

英語は前々からやるといいつつやってなかったのでやります。と言ってもどうせすぐには動かないと思ったので一ヶ月ほど前から助走期間として一日一時間程度ですが、勉強するようにしています。勉強することに慣れてきたので継続的にやりつつ、試験受けようと思います。

自分のプロダクト作り

細々としてツールは自分で作ったりしているんですが、一からサービスを構築して継続的に運用する体制を整えるといったことはやったことがない(既にあるものを用途に合わせてチューニングしたりメンテナンスしたりはしている)ので、そのあたりを触ってみようかと思います。

コンペへの参加

去年は後輩にDeepAnalyticsを教えてもらってちょっとだけ参加したりしてましたが、少しいじって提出する程度で大したことできなかったので、今年はもうちょっと本腰入れて参加できればと。ちなみに今はkaggleのToxic Comment Classification Challengeに参加してたりします。

Toxic Comment Classification Challenge | Kaggle

自然言語処理全般に興味があるので、これ以外で何かしら面白そうなものがあれば参加してみようと思います。

まとめ

一昨年・去年と落ち込むことが多かったので、今年は穏やかに過ごせればいいなと思います。加えて自身の目標について少しずつ触っていければと。