nbht

中小な会社の情報システム部門に所属。ユーザー企業側の立場。家族が寝静まった深夜、お気に…

nbht

中小な会社の情報システム部門に所属。ユーザー企業側の立場。家族が寝静まった深夜、お気に入りの音楽を聴きながらお酒を片手にコードを書くのがスキ。 https://bulkus.net/

  • ひとりアドベントカレンダー Flutter編 2018

    メジャーリリースに向けて最後の追い込みに入ってそうなFlutter。(← 12/4にリリースされました） 公開したFlutter製のアプリを例題にして、開発過程を段階的に公開していきます。 一記事/日を基本にしますが、都合により遅れたり先走っての公開になるかもしれません。

利用しているSNS等をまとめてシェアできるkrossbioというサービスをつくった

はじめにGoogle+が修了すると聞いて「やっぱりそうだよね。そうなるよね。」と思った僕は気がついたらFirebaseに新しいプロジェクトを作ってたんだ。 どんな内容のポストでもそれなりに表示できて、閲覧/公開相手も柔軟に選べるSNSっていうのはどう見てもメンテナンスコストが高い。 なので、そのコストがリターンと見合わなくなれば、そのサービスはいつか終わってしまうだろうなとはいつの頃からか漠然と感じていた。 そう考えると、これからのWebサービスというのは特定の使い方で特

nbht

    • タブでのカテゴリ分け -ひとりアドベントカレンダー Flutter編 2018 その12-

      MaterialIconは数が豊富で良いのですが、フラットなままで見ると数が多すぎて少し見づらいです。 ということで、12日目はアイコンをタブでカテゴリ分けしてみます。 昨日までの内容と今後については目次を参照してください。 ところで、JSONデータを処理するときに利用したAPIにはカテゴリ情報がついていました。 今回はそのカテゴリ情報を元にしてタブに分割表示してみます。 いつもどおりGitHubのプロジェクトにChapter12でブランチを作ってます。今回は変更点が大

      nbht

      • 下スワイプでの画面クローズ -ひとりアドベントカレンダー Flutter編 2018 その11-

        最近のスマートフォンは大画面化がすすみ上部の戻るボタンまで指が届かず、テンポよく操作しにくくなってきています。 ということで、11日目は閉じるボタンを押さずとも下スワイプで画面を閉じてみます。 昨日までの内容と今後については目次を参照してください。 今回も先日使ったGestureDetectorを利用します。 いつもどおりGitHubのプロジェクトにChapter11ブランチでアップしてますので、参照して下さい。 下スワイプアクションのトリガは画面を覆うアイコンで良いと

        nbht

        • Heroでの画像アニメーション -ひとりアドベントカレンダー Flutter編 2018 その10-

          画面遷移で拡大表示は出来ましたが、ただ遷移させただけではMaterialDesign特有の華やかさというか遊び心がすこし足りない感じです。 ということで、10日目は画面遷移の際にアニメーションを加えてみます。 昨日までの内容と今後については目次を参照してください。 アニメーションを加えるというと、絵心もセンスもない人はそれだけで難しそうと敬遠してしまいがちです。 ですが、Flutterはアニメーションも簡単にできる仕組みが整っているうえ、画面遷移時であれば自動的にアニメー

          nbht

        利用しているSNS等をまとめてシェアできるkrossbioというサービスをつくった

        nbht

        • タブでのカテゴリ分け -ひとりアドベントカレンダー Flutter編 2018 その12-

          nbht

        • 下スワイプでの画面クローズ -ひとりアドベントカレンダー Flutter編 2018 その11-

          nbht

        • Heroでの画像アニメーション -ひとりアドベントカレンダー Flutter編 2018 その10-

          nbht

        マガジン

        • ひとりアドベントカレンダー Flutter編 2018
          13本

        記事

          タップして個別に拡大表示 -ひとりアドベントカレンダー Flutter編 2018 その9-

          マテリアルアイコンを一覧表示という目的はほぼ達成しましたが、ときには個別に拡大してみたくなるときもあります。 ということで、9日目はタップで画面遷移させて拡大表示させてみます。 昨日までの内容と今後については目次を参照してください。 画面を遷移させるには、「遷移先の画面を作成」「遷移させるアクションの作成」という2つの対応が当然ながら必要です。 今回もGitHubのプロジェクトにChapter9ブランチを作っているので参照してください。 さて、順に見ていきましょう。

          nbht

          タップして個別に拡大表示 -ひとりアドベントカレンダー Flutter編 2018 その9-

          nbht

          MediaQueryを利用してサイズ調整 -ひとりアドベントカレンダー Flutter編 2018 その8-

          単にスマートフォンと言っても画面サイズは多種多様にあるので、端末によってはアイコンが大きすぎたり小さすぎたりしてしまって見づらい可能性があります。 ということで、8日目はデバイスのサイズを取得し、どの端末でもほぼ同じ大きさになるように自動計算させてみます。 昨日までの内容と今後については目次を参照してください。 今回は簡単な題材なので、内容も簡単にいってみたいと思います。 FlutterにはMediaQueryというクラスがあり、デバイスの表示状況を簡単に取得できます。

          nbht

          MediaQueryを利用してサイズ調整 -ひとりアドベントカレンダー Flutter編 2018 その8-

          nbht

          モデル化させてMとVを分離 -ひとりアドベントカレンダー Flutter編 2018 その7-

          Flutterではロジック部分もUI部分もDartで書くことが出来ることがメリットなのですが、ロジックとUIが混じってしまうと見通しが非常に悪くなり保守性が低くなります。 ということで、7日目は前回のコードをリファクタリングしてモデル化させてみます。 昨日までの内容と今後については目次を参照してください。 リファクタリングしてモデル化といっても、FlutterだからとかDartだからとか特別な話は殆どありません。今回はモデルとしてIconクラスとIconsクラスを作ってデ

          nbht

          モデル化させてMとVを分離 -ひとりアドベントカレンダー Flutter編 2018 その7-

          nbht

          FutureBuilderを使って非同期にデータ表示 -ひとりアドベントカレンダー Flutter編 2018 その6-

          最近のアプリは外部APIやクラウドデータを利用することが多いと思います。そんなとき同期処理をしててはUIにロックが掛かってしまいますので、非同期で処理をする必要があります。 ということで、6日目はFutureBuilderを使ったWidgetの非同期組み立てをやってみます。 昨日までの内容と今後については目次を参照してください。 FutureBuilderを利用する前にFlutter(Dart)のFutureを少し理解する必要がありますが、JavaScriptで言えばPr

          nbht

          FutureBuilderを使って非同期にデータ表示 -ひとりアドベントカレンダー Flutter編 2018 その6-

          nbht

          HTTPでJSON取得 -ひとりアドベントカレンダー Flutter編 2018 その5-

          今どきのアプリであればHTTPでのデータ取得は必須な処理だと思います。そのなかでも、今やJSONでのやり取りはスタンダードになっています。 ということで、5日目はHTTPでJSONを取得してみたいと思います。 昨日までの内容と今後については目次を参照してください。 前回は正規表現を使ってベタなテキストデータを処理してアイコンの一覧を作る準備をしました。しかしアイコンは1,000種類近くもあるため、何らかの方法でカテゴリ分けをしたいところです。 そんな感じでなにか良い方法

          nbht

          HTTPでJSON取得 -ひとりアドベントカレンダー Flutter編 2018 その5-

          nbht

          正規表現でテキスト処理 -ひとりアドベントカレンダー Flutter編 2018 その4-

          最近は専用のAPI経由でフォーマット済みのデータを取得して使用することが多くなりましたが、それでもまだまだベタなテキストを処理する機会は存在します。そんなテキスト処理のときに力を発揮するのが正規表現。もちろんDartでも使えます。 ということで、4日目は正規表現を使ってみたいと思います。 昨日までの内容と今後については目次を参照してください。 マテリアルアイコンを一覧表示させるためには、一覧表示させるための元リストが必要になります。例えばIconsにforeachなどのメ

          nbht

          正規表現でテキスト処理 -ひとりアドベントカレンダー Flutter編 2018 その4-

          nbht

          SafeAreaで表示エリアを確保 -ひとりアドベントカレンダー Flutter編 2018 その3-

          ノッチに邪魔されずコンテツを表示させるのは結構面倒だったりします。が、FlutterであればSafeAreaというWidgetが標準で用意されていますので、簡単に対応させることができます。 ということで、第3日目はSafeAreaを使ってみたいと思います。 昨日までの内容と今後については目次を参照してください。 iPhoneXで登場したノッチ（正式名はセンサーハウジング）、今年は全てのモデルに適用されましたね。Androidでもノッチ付きが増えてきており、新規にアプリを作

          nbht

          SafeAreaで表示エリアを確保 -ひとりアドベントカレンダー Flutter編 2018 その3-

          nbht

          Padding（またはMargin）だけが目的でContainerを使うのは間違ってる（というか分かりづらい） -Flutter-

          この記事は Flutter Advent Calendar 2018 向けの記事です。 ・レイアウト調整の目的でPadding付きのContainerでラップすると分かりづらくない？ ・調整用のカスタムWidgetを作って挟み込むと良いのでは？ ・「コードが短くなる」「ネストは深くならない」というメリットも！ 高レベルなネタが多そうな中、こんな感じで背伸びせず軽い感じでいってみたいと思います。 Row( children: [ Icon(Icons.folder

          nbht

          Padding（またはMargin）だけが目的でContainerを使うのは間違ってる（というか分かりづらい） -Flutter-

          nbht

          Cardでコンテンツをカード表示 -ひとりアドベントカレンダー Flutter編 2018 その2-

          グリッド表示ではカードスタイルが見やすく、カードスタイルはグリッド表示にしたくなるという、CardとGridは相性抜群です。 ということで、2日目はCardを使ってみたいと思います。 昨日までの内容と今後については目次を参照してください。 さてFlutterでのCardですが、一つの記事にするにはあまりにもシンプルすぎます。childは必須として、実際に使うとしたらcolorとmarginくらいでしょうか. コードはこんな感じに。 Widget build(Build

          nbht

          Cardでコンテンツをカード表示 -ひとりアドベントカレンダー Flutter編 2018 その2-

          nbht

          GridViewでコンテンツを一覧表示 -ひとりアドベントカレンダー Flutter編 2018 その1-

          iPhoneが登場したあとはスマートフォンでの一覧表示といえばリスト表示というのが一般的でしたが、コンテンツの主役ががテキストからイメージに変わってきたこともありグリッド表示というのも一般的になってきました。 ということで、第一回目はGridVIewを使ってみたいと思います。 明日以降の予定は目次を参照してください。 さて、FlutterでのGridViewですが、利用方法が5つ用意されています。 CustomやExtentなどは名前からややこしそうなので、今回は素直に

          nbht

          GridViewでコンテンツを一覧表示 -ひとりアドベントカレンダー Flutter編 2018 その1-

          nbht

          ひとりアドベントカレンダー Flutter編 2018 ～目次～

          Flutterいいですよね。慣れちゃうとSwiftさえも触りたくなくなっちゃいます。 年内にリリースされれば今以上に熱くなることは確実(12/4にリリースされました）なので、先にビッグウェーブに乗る感じで24回に分けて記事を投稿しておこうと思います。 題材は公開したての「Material Icons Viewer」です。ぶっちゃけマテリアルアイコンを一覧表示するだけのアプリですが、そこそこ機能を詰め込みました。 作りが簡単な分、記事もわかりやすくできるのでは？なんて考え

          nbht

          ひとりアドベントカレンダー Flutter編 2018 ～目次～

          nbht

          OOUXについての良いページがあったので社内メンバー勉強用に噛み砕いてみた

          2年前に公開された内容ではあるが、全然古臭さがない。むしろ古臭い基幹の業務システムを扱ってる身には新しい発見しかなかった。 非常にためになる内容ではあるがなにせ非常に長い（数えさせたら23,855文字！！）ので、会社のメンバーに理解してもらう前にまず自分で噛み砕いてみた。 ちなみに量的には1/10になったが、内容的には1/100とかになってるかもしれない。 時間があれば直接元ページを読んだほうが良いし、少しでも興味が持てたら元ページも読んだほうが良いと思う。 理解した内

          nbht

          OOUXについての良いページがあったので社内メンバー勉強用に噛み砕いてみた

          nbht