紅茶検定に合格しました

2ヵ月ほど前の目標進捗報告で書いていた「紅茶検定」に合格しました。

kenteiblog.hatenablog.com

 

 

www.kentei-uketsuke.com

 

ベーシック(初級)とアドバンス(中上級)の両方を受けていましたが、両方とも受かっていました。(アドバンスのほうがギリギリでしたが…('ω'))

 

カレルチャペック紅茶店の可愛らしい絵が描かれた賞状がもらえるので、紅茶好きな人にはおすすめです。

賞状はこんな感じです(^^)/

 

f:id:kentei0715:20180412220249j:plain

 

1つ趣味の範囲が広がった気がします。次はコーヒーでも受けてみようかな(^_-)-☆

 

以上、報告でした。

 

2018/4/12 賢帝俊来

私事(エイプリルフールネタ)

(エイプリルフールネタです。お騒がせして申し訳ありません。)

 

すみません。私事です。

 

最初は親族のみに留めておく予定でしたが、
拠点が変わることにつながるため、書かせていただきます。

 

昨日結婚させていただきました。

 

また、私の懇願が通ったのか、弊社でもリモートワークが解禁され、

相手の実家が近い地方へと拠点を移すことになりました。

(時々は飛行機で本社に戻らないといけないようですが、基本的には行ったっきりになります)

 

電波の届きにくいところなので、準備ができるまでブログの更新などが滞る可能性があるため報告しました。

とはいえ、ブログは引き続き続けていきますので、今後ともよろしくお願いいたします。

 

 

 

以上です。

 

 

 

 

 

 

 

 

2018/4/1(今日はエイプリルフールですね(^_-)-☆) 

賢帝俊来

2018/3/31 1ヵ月成果報告

目標達成に向けてどこまで動けているか、ひと月ごとに確認しておく。

 

目標は以下。

kenteiblog.hatenablog.com

 

  1. 高度情報技術者試験の合格
    ⇒結局今月は何もできてないです。。言い訳は仕事忙しすぎ(>_<)
  2. 予算管理ツールの導入、運用
    ⇒先月同様マネーフォワード運用中
  3. (2月完了済み)モバイルルーターの契約見直し(目標達成)
    ⇒解約済み。
  4. 体重を10kg落とす
    ⇒+2kg(´゚д゚`)
  5. 定期健診を受ける
    ⇒対応なし。言い訳は仕事忙しすぎ(>_<)
  6. アプリを2個以上リリースする
    ⇒Flutterでアプリを製作中。
  7. ブログを最低1週間に1回は更新する
    ⇒3月はFlutterの体験記を書きました。7記事分書きました。

 

 

結局、仕事の忙しさにかまけて、病院もいけてないし勉強もできてないですね。。

唯一 褒められるのはFlutterの体験記を書ききれたことぐらいですかね。

もう少し自分の時間が取れるように努力したいと思います。

(なんか体重が増えてる気がするけど…明日から頑張る(^^)/ww)

 

以上です。

2018/3/31 賢帝俊来

Flutterを体験しよう最終回 ~Flutterをもっと学ぼう~

 前提記事

kenteiblog.hatenablog.com

 

ということで、ここまで公式のドキュメントを参考にしながら、手順通り進めてきました。今回は、「体験してみよう」の最終回です。

Get Started: Learn More - Flutter

 

いつもは「直訳は続きからで~」となるのですが、今回はかなり単純な内容なので、直訳をほぼそのまま載せます。(ほぼ他のページへのリンクなので。。) 

 

では以下からスタート。

 

Flutterについてもっと学んでみよう

 

◆Flutterフレームワークについてもっと学ぼう。

 

 

◆その他(ドキュメント類)

 

※あとは、「困ったことがあればメールしてね」というのと、「Flutterライフを楽しんでね(^^)/」というメッセージが書かれていますが、ここでは省略します。

 

 

 

終わりに

ということで、ここまでが公式のドキュメントに記載されている、Flutterの体験方法についてでした。

全体的な仕様動作を掻いつまんだようなドキュメントのようで、これを読むと基本的なことはできるようになった気がします。(とはいえ記載時はβ版なので今後も進化していくと思いますが)

本記事でも示したように、Flutterフレームワークについてはまだまだ学べることがあるようです。今後も読み進めていく予定ですが、今までのように全訳を載せるようなことはせず、気になった部分だけピックアップして記事にする予定です。(あくまで予定ですw)

 

依頼があればしますが…まぁここまでの訳の体たらくを見ていただければ、そんな気は起きないと思いますw

 

うーん、最近は日本語も怪しいのに…人語が話せなくなりそうですw

 

以上です。

2018/3/26 賢帝俊来

Flutterを体験しよう4-2 ~Flutterでアプリを作ってみる2~

 前提記事

kenteiblog.hatenablog.com



 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、実際にアプリを作ってみようという話の続きです。

Write Your First Flutter App - Flutter

 

1ページが長いので、今日は第2弾ということで最後まで読み進めます。

 

なお、私が文章をそのまま意訳した結果については最後のほうに「続きから」の形で隠しておきます。(説明上、余計な文もあるので)

 

では、以下からスタート。

 

自分のFlutterアプリを書いてみよう

ドキュメント上は以下の7つのステップに分かれています。

  • Step1: Flutterアプリの開始点を作成
  • Step2: 外部パッケージを使用
  • Step3: Stateful Widgetを追加
  • Step4: 無限にスクロールするリストビューを作成
  • Step5: 対話性を追加
  • Step6: 新しい画面への遷移
  • Step7: テーマを利用しUIを変更

本記事では、Step5~Step7を説明していきます。(上記の青文字部分)

 

 

1. Step5: 対話性を追加

Step4までで、名前の一覧を表示するという動きを実現できました。

次は、対話性(インタラクティブ)を実装していきます。
先に結論から述べてしまうと、以下ができるようになります。

  • 一覧の各行にハートマークが表示され、押すことでONOFFを切り替えられる。
  • 上記のONOFFはスクロールして戻ってきても残ったままになっている。(状態を保存している)

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい5-1

 

(2)Hot Reloadして以下のような表示となります。

 

f:id:kentei0715:20180325121356p:plain

 

ハートアイコンを押すことで、ON(ハートが赤い状態)とOFF(ハートが白抜きの状態)を切り替えることができます。この状態は、無限スクロールを繰り返した後でも、消えることなく残っています。

 

2. Step6: 新しい画面への遷移

 

ここでは、新しい画面への遷移の方法を示します。

また、Flutterでは画面のことを「route(ルート)」と呼ぶらしいので、説明上「ルート」といったら画面のことと解釈してください。

 なお、先にできることの結論から言ってしまうと、以下のとおりです。

  • アプリケーションバーの右方にボタンを設置。押すと新ルートに遷移できる
  • 新ルートではお気に入り登録した名前(ハートマークON)の一覧が表示される

 

(1) 以下のように、lib/main.dartを修正します。(コードの説明はコメントで書いています。文頭の番号は実装順と同じです)

 

flutterアプリを作ってみたい6-1

 

(2)Hot Reloadして以下のような表示になります。

 

f:id:kentei0715:20180325122920p:plain

アプリケーションバーの右のほうにあるアイコンを押すと、画面が遷移してお気に入り一覧が表示されます。
上記画像のとおり「HeadBird、SharpEast、WebSpread」がお気に入り登録されているので、遷移後もそれらが表示されています。

なお余談ですが、新ルートに表示されている戻るボタン(←ボタン)は特に実装しなくても、Navigatorがよしなにやってくれるものです。

 

3. Step7:テーマを利用しUIを変更

 

一応、前のステップまででアプリの動作は出来あがっています。

最後はUIの見た目を変えてみましょうという話です。おまけ的な話ではあるので、軽く読んでいただければと思います。(修正も微量です)

 

(1) 以下のように、lib/main.dartを修正します。

 

flutterアプリを作ってみたい7-1

 

(2)Hot Reloadすると以下のような表示になります。

 

f:id:kentei0715:20180325123730p:plain

 

前ステップまでの画像と比較してみてください。アプリケーションバーの部分の背景色が青色から白色に変わっているはずです。

 

 

 

4. 終わりに

ということで、前回記事も含めてStep1~Step7まで見てきました。
ここまでで以下のことが体験できました。

  • Flutterアプリの地盤からの開発
  • Dartコードで記述
  • 外部のサードパーティ製のライブラリを利用
  • より速い開発サイクルのためのHotReloadを利用
  • Stateful Widgetの実装、およびアプリへの対話性の追加
  • 遅延ロードの実装、および無限のスクロールの実現
  • ルートの作成と遷移ロジックの実装
  • テーマ利用によるアプリのUI表示の変更

なかなか盛沢山でしたね(>_<) 

 

と、ここまでが今日の説明。次回は体験の最終回です。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

(日本語訳もかなり怪しくなってきました…w)

 

以上です。

2018/3/25 賢帝俊来

 

続きを読む

Flutterを体験しよう4-1 ~Flutterでアプリを作ってみる1~

 前提記事

kenteiblog.hatenablog.com



 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、実際にアプリを作ってみようという話です。

Write Your First Flutter App - Flutter

 

1ページが長いので、今日は第1弾ということでStep4まで読み進めます。
 文字の組み合わせを一覧表示するところまでですね。

 

なお、私が文章をそのまま意訳した結果については最後のほうに「続きから」の形で隠しておきます。(説明上、余計な文もあるので)

 

では、以下からスタート。

 

自分のFlutterアプリを書いてみよう

ドキュメント上は以下の7つのステップに分かれています。

  • Step1: Flutterアプリの開始点を作成
  • Step2: 外部パッケージを使用
  • Step3: Stateful Widgetを追加
  • Step4: 無限にスクロールするリストビューを作成
  • Step5: 対話性を追加
  • Step6: 新しい画面への遷移
  • Step7: テーマを利用しUIを変更

本記事では、Step1~Step4を説明していきます。(上記の青文字部分)

 

0. 事前準備

前回の記事で新規プロジェクトが作成できているのであれば、何も準備は必要ありません。

※私はVisual Studio Code(VS Code)を利用します。

1. Step1: Flutterアプリの開始点を作成

まずはHelloWorld的な処理を書いて、アプリ作成の足掛かりを作ります。

 

(1)新規Flutterプロジェクトを作成します。

前回記事では「myapp」でしたが、今回は「startup_namer」とします。

 

(2)lib/main.dartを以下のように書き換えます。

これにより、画面中央に「こんにちは世界‼」と表示されるようになります。

 

 

flutterアプリ作ってみたいstep1-1

 

 

※説明はコメントに記載

 

(3)アプリを起動すると以下のようになるはずです。

 

f:id:kentei0715:20180321144144p:plain

 

 

2. Step2: 外部パッケージを使用

このステップでは、オープンソースパッケージを利用します。
今回は「english_words」という英語で最もよく使われる数千の単語とUtility関数を含んだパッケージを利用します。

(その他のオープンソースに興味がある方は、Dart Packages で見つけることができるようです)

 

(1) pubspec.yamlで依存関係を登録します。

いきなり「import 'package:english_words/english_words.dart';」みたいに記載しても、english_wordsパッケージなんて持ってないのでただエラーになるだけです。
なので、packageを取得する必要があります。そのためにまずは以下のように記載します。

 

flutterアプリを作ってみたい2-1

 

(2) pubspecファイルを表示した状態で、右上にあるパッケージ取込ボタンを押します。

これにより、english_wordsパッケージを取得することができます。
以下は、VSCodeでの例です。

f:id:kentei0715:20180321150019p:plain

 

(3) 以下のように、lib/main.dartを修正します。

flutterアプリを作ってみたい2-2

 

(4) Hot Reloadすると、以下のように、画面の中央の文字が変わります。(もちろん文字列はランダム)

f:id:kentei0715:20180321161313p:plain

 

画面の表示はHotReloadをするごとに変わります。
これは、MaterialAppがレンダリングを必要としたときなどにbuildメソッドが呼び出されるためです。

 

 

3. Step3:Stateful Widgetを追加

MyAppクラスではStateless(ステートレス)Widgetクラスを継承しましたが、
今回はStateful(ステートフル)Widgetクラスを使います。

そもそも「ステートフル」というのは、

ステートフルとは、システムが現在の状態を表すデータなどを保持しており、その内容を処理に反映させる方式。同じ入力に対する出力が常に同じとは限らず、内部の状態次第で変わることがある。

ステートフルとは - IT用語辞典

 とのことなので、

今回のStatefulWidgetとは、

「状態を表すデータを保持していて、そのデータにより振る舞いが変わるウィジェット」ということになります。

 

実際にやってみたほうがわかりやすいと思うので進めます。

 

(1) 以下のように、lib/main.dartを修正します。

 

 

flutterアプリを作ってみたい3-1

 

(2)Hot ReloadしてStep2の結果と同様の動きをすれば成功です。

 

…とここまでやってみてもよくわかりませんよね。。(逆に難しくしているだけな気さえする)
だけど大丈夫です。Step3は今後の基盤を作っているだけなので。
今は1個だけ画面中央にランダム文字を表示しているだけなので、意味ないことをしているようにも見えますが、次のStepから意味のあるものに変わっていきます。

 

4. Step4:無限にスクロールするリストビューを作成

ということで、本ステップでは1個ではなく無限にリストを作っていきますよ。
要は前の状態を覚えておかないといけない系のやつですね。

 

(1)以下のように、lib/main.dartを修正します。(コメント欄の項番の順に読むとわかりやすいかもしれません)

flutterアプリを作ってみたい4-1

 

(2)Hot Reloadして以下のような表示となれば成功です。

f:id:kentei0715:20180321234129p:plain

 

試しに下にスクロールしてみてください。どんどん無限に名前が出てくるはずです。

逆に上にスクロールで戻ってみても前の情報はしっかりと保持しているはずです。

 

 

と、ここまでが今日の説明。次回は引き続きStep5~Step7を実施していきます。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

(日本語訳もかなり怪しくなってきました…w)

 

以上です。

2018/3/21 賢帝俊来

 

続きを読む

Flutterを体験しよう3 ~動作テスト~

 前提記事

kenteiblog.hatenablog.com



 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、実際にアプリを動かしてみる話ですね。

Get Started: Test Drive - Flutter

 

なお、私が文章をそのまま意訳した結果については最後のほうに「続きから」の形で隠しておきます。(説明上、余計な文もあるので)

 

では、以下からスタート。

 

Flutterアプリを動作させてみよう

※私はVisual Studio Code(VS Code)を利用します。

1. 新規アプリケーションの作成 

(0)VS Codeを起動します。

(1)「表示 > コマンドパレット」を呼び出し、「flutter」入力します。
 「Flutter: New Project」というものがあるので、それを選択します。

f:id:kentei0715:20180309003158p:plain

 

(2) プロジェクト名を入力するように言われるので、入力してEnterキーを押します。
以下の例は「myapp」という名前にしています。

f:id:kentei0715:20180309003406p:plain

 

 

(3) フォルダ選択ダイアログが表示されるので、プロジェクトフォルダを作成する適当なフォルダを選択します。 

 

(4)新しくVS Codeの画面が表示され、main.dartファイルが表示されるまで待ちます。
以下のようになれば完了です。

f:id:kentei0715:20180309003918p:plain

 

2. アプリの実行

(0)エミュレータを実行、またはデバイスを接続します。

(1)VS Codeの右下に対象デバイスが表示されていることを確認します。(赤く囲んでいる部分)

f:id:kentei0715:20180309004227p:plain

 

(2)キーボードのF5キーを押すか、「デバッグ > デバッグの開始」を呼び出します。

(3)アプリが起動すると、以下の画面がエミュレーター(またはデバイス)上に表示されます。

f:id:kentei0715:20180309004532p:plain

+ボタンをポチポチおすと、カウントが増えていきます。

とりあえずアプリの起動はここまで!!

 

3. Hot Reloadの動作確認

起動中のアプリを止めずに、コードの更新を反映するHot Reload機能の動作を確認してみましょう。

 

(1) VS Code上でlib/main.dartファイルを開きます。

(2)93行目あたりにある「You have pushed the button this many times:」という文字列を「You have clicked the button this many times:」に変更します。

(3)「停止」ボタンは押さずに、保存を呼び出すか、Hot Reloadボタン(緑色の円形の矢印ボタン)を押してください。

f:id:kentei0715:20180310001238p:plain

(4)実行中のアプリで文字列が更新されていることを確認してください。

 

f:id:kentei0715:20180310001540p:plain

 

と、ここまでが今日の説明。次回は小規模なアプリを作りつつ、Flutterの概念を学んでいくようです。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

 

以上です。

2018/3/10 賢帝俊来

 

続きを読む