FlutterでWidget間に線を引きたい
適当にUI作ってて、ふとWidget間に線を引きたくなって調べたのでメモ。
シンプルな横線であれば、Widget CatalogにあるDividerで出来るっぽい。Widget Catalogほんと便利。
以下公式のドキュメント https://docs.flutter.io/flutter/material/Divider-class.html
使い方は単純 配置したい場所にDividerのインスタンスを作って、線の色を指定するだけ。私の場合だと、ColumnでWidgetを並べて配置したいところに以下を差し込む形にしました（色は違うけど）。楽でいいね。
new Divider( color: Colors.black )
まとめ
細かい設定は別として、とりあえず線を引きたいならこれだけでいいので楽でいいね。
おまけ
普通にListTileを使っていて、ListTile間の線の色を変えたいとかであれば、ListTileのdividerColorの色とか変えれば多分できます（試してないけど、そういう引数はある）。
「ビックデータを支える技術」を読んだ
特に内容を知らずにタイトルが気になったので、「ビックデータを支える技術」を読んでました。
ビッグデータを支える技術―刻々とデータが脈打つ自動化の世界 (WEB+DB PRESS plus)
- 作者: 西田圭介
- 出版社/メーカー: 技術評論社
- 発売日: 2017/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (2件) を見る
感想
細かい内容については他の色々な方が書評を書かれているので書かずに、自分の感想を。
ざっくり本の内容はデータ分析だったり機械学習が流行ってきた中でそれを行うためのデータ分析基盤をどう整えていくかという本。最後の章ではラップトップで一台で完結できるチュートリアルなんかもあったりして勉強になります。
データ分析基盤ではないですが、似たようなものを作ってたことがあったので4章「ビックデータの蓄積」については懐かしくもあり、当時の全然足りていなかった知識の補完ができたので、以前作ったものを作り直したくなりました （笑）
「データ分析」だったり、「データ分析基盤」に関わっていない方だとしても、実際にデータがどう収集されて蓄積されているかを知ることは無駄にはならないと思うので一読してみるといいと思います。
flutterでpull to refreshを実装する
最近、友人たちと何か作るときにさっくりプロトタイプを作る手段としてflutterをちょこちょこ使っています。そんな中でpull to refreshどうやるんだろうと思ったので簡単にまとめます。
pull to refresh自体は既にRefreshIndicatorが用意されているので、それを使うといいと思います。
公式のドキュメントは以下。
使い方は簡単で、RefreshIndicatorのonRefreshプロパティにrefresh時の挙動を実装するだけで動きます。
return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new RefreshIndicator( onRefresh: _onRefresh, child: new Scrollbar( child: new ListView( children: _items.map((item) { // 適当な処理 }).toList() ) ) ) );
公式のサンプルでも用意されているので眺めてみるといいかもしれません。
まとめ
flutterでpull to refreshをできるようにしてみました。flutterはWidgetを色々組み合わせるだけである程度のものができ、公式のサンプルも豊富なのでちょっとしたものを作るのであれば非常に楽です。androidでpull to refreshを実装したときは微妙に面倒だった記憶があるんですが、今回はドキュメントを見つけてしまえば割と簡単にできました。
React Nativeだったり、Xamarinがあるなかで、どの程度流行るかはわかりませんが個人的にはある程度はやってほしいなーと思っていたりします。
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で上書きすればいいだけです。こちらについては調べれば記事がたくさん出てくるのでそちらを見たほうがよいかと。
参考にしたのは以下です。
まとめ
便利なvueの機能のおかげで思ったよりも簡単にタブ入力ができるようになりました。調べ始めた時はjQueryでやるしかないのかと一瞬怯みましたが、vueで実現できてよかったです。 vueの細かい部分については以下のドキュメントを参考にしたので、他のことをやってみたいは見てみるといいかと思います。
Firebase hostingにvueのアプリケーションをデプロイする
普段はAWSを使っていて、ちょっとしたアプリケーションであれば、S3において外部からアクセスできるようにしてました。今回、ちょっとした事情でGCPを使わないといけなくなったので、同等のことができそうということで、Firebase hostingを使ってみました。
Firebase hostingはざっくり言うと、静的サイトをお手軽に公開できるサービスです。ざっくりしすぎですかね。詳細は公式のページを参照したほうがいいです。
今回はvueで作ったちょっとしたアプリケーションをFirebase hostingで動かしてみました。手順は以下。既に動かすアプリケーションはあるという前提です。
- firebaseでプロジェクトを作成
- firebase-toolsをインストール
- デプロイするアプリケーションのディレクトリを指定
- デプロイ
firebaseでプロジェクトを作成
firebaseのコンソールからプロジェクトを作成できるので、作成してください。
firebase-toolsをインストール
npmでfirebase-toolsをインストールします。
$ npm install -g firebase-tools
次にCLI経由でfirebaseにログインします
$ firebase login
コマンドを実行したら、認証用のページに飛ぶので認証してください。
デプロイするアプリケーションのディレクトリを指定
デプロイしたアプリケーションのルートで以下のコマンドを実行します。
$ firebase init
実行するとfirebase用の設定ファイルが生成されます。生成されるのは以下２つ。
- 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のテンプレートで作ったものなので、それ準拠で。
やることは以下の３つ
- loaderのインストール
- vue-loaderのオプションにscssのloaderを設定
- 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のドキュメントに色々書いてあるので一度読んでみるといいと思います。
bootstrap4のnavbarの位置を固定する
bootstrap4を使っていて、スクロールした時にnavbarを上に固定したかったのでやり方をメモ。
基本的にはclassにfixed-***をつければいい。
上部に固定は以下
<nav class="nav fixed-top"> <a>上に固定</a> </nav>
ついでに下に固定も
<nav class="nav fixed-bottom"> <a>下に固定</a> </nav>
細かいドキュメントは以下
