FlutterでTwitter認証をつかう

Flutterをやり始めた

アプリにTwitterでの認証を組み込みたかったので、pubで検索してみたところ、flutter_twitter_login とかFirebase Authあたりかなーという感じだった

当初はFirebase Authで認証しようとしていたが、これは他サービスの認証情報を使って認証ができるよというもので、他サービスのログイン処理はこちらでやる必要があるものだった😶

具体的には以下のsignInWithTwitter メソッドでアクセストークンを引数にとるので、アクセストークンは別に取得してこないといけない github.com

ということなので、今回は前者を試してみる　

flutter_twitter_login

github.com

チュートリアルに従ってコードを書いたら、認証時に 415 error というのが返ってきてた🤔
調べてみると、どうやらコールバックURLをちゃんと書かないといけなくなったらしい...

Callback URLs — Twitter Developers

flutter_twitter_login での認証処理はAndroid/iOSともにTwitter kitを用いているので、Twitter Applications側でコールバックURLにtwittersdk:// と twitterkit-${CONSUMERKEY}:// を追記してあげる。

うまくできた！

github.com

AndroidでMVIアーキテクチャを使う

droidKaigi2018でMVIという単語を知り、実際に使ってみました。まだまだ勉強中なので、適宜ご指摘お願いします…。

MVIアーキテクチャとは

Model - View - Intent の3つを中心として、データを単一方向のストリームとして扱います。IntentはAndroidのIntentではなく、ユーザからの操作やリクエストのような意味です。Fluxアーキテクチャに似たところがあり、開発でReduxなど使われている方は理解が早いと思います。

droidKaigi2018で発表されていたスライドがこちらです。サンプルコードと合わせて読むとほぼ理解できると思います。
Android における Model-View-Intent アーキテクチャ // Speaker Deck

サンプルコードがこちらです。 github.com

スライドに出てくる核となるパーツ郡

• Intent
  ユーザー視点からのやりたいこと、操作を詰める

• Action
  システム視点からのやりたいことを詰める

• Processor
  非同期処理など実際の処理を行い、結果をResultとして返す

• Result
  処理の結果を詰める

• Reducer
  Resultを受け取り、必要に応じてStateを変化させる

• State
  画面の状態を詰める

• render
  Stateを受け取って、必要に応じて描画処理をする

よかったこと、よくなかったこと

• データの流れが把握しやすい
  Fluxと同様にデータの流れが単一方向に絞られる事で、処理のイメージがしやすいです

• それぞれの層でのやりたい事に集中できる
  上記パーツ郡のように処理を細かく区切った事で、それぞれがやる事が明確になりました。また、非同期処理やライフサイクルによる問題も吸収してくれて、考える事が少し減りました。

• テストしやすい
  素早くFragmentから切り離され、処理が細かい関数に分かれているので、それぞれのテストがしやすいです。

• コードの分量は多め
  ViewModelが担当する区域が広いので、ごついViewModelができました。

• 画面それぞれがstateをもつ
  Reduxのように一括で状態を管理するわけではなく、画面ごとに管理されます。Reduxとの違いの1つでした。

感想

これまでアーキテクチャについて、とりあえずでMVVMにしてみたり、開発中で汚くなったり、曖昧にしている箇所が多くありました。今回新しいアーキテクチャに触れる事で、考え方や長所それぞれ違いがある事を改めて感じました。
そもそもなぜ必要としていたのかもう一度考え直し、他のアーキテクチャについても理解を深めて、それぞれの長所と使い分けを整理しようと強く思いました。

エンジニアのためのポモドーロタイマー

つくったもの

Sandglass
GitHubと連携する事で、作業履歴を確認する事ができるエンジニア向けポモドーロタイマーです。

作業の集中が切れたり、かけた時間に対してコードが書けていない事があり、作業効率を上げたいと思った所で先輩から教えていただいたのがポモドーロ・タイマーでした。

ポモドーロ・タイマー形式のWebアプリはありますが、単純なタイマー機能のみの物が多かったので幾つか機能を追加して作成してみました。

そもそもポモドーロとは

ポモドーロ・テクニックという集中力管理手法で、25分作業して5分休憩…といった短い区切りの作業と休憩を繰り返します。 作業と休憩を5回繰り返したら、25分の大きい休憩をとる事ができます。

つけた機能

• タイマー機能
  25分の作業と5分の休憩を計測をする、基本的な機能です。設定からYouTubeの動画・音声をアラームとしてセットする事もできます。

• コミット数確認
  今行っている作業で、どれだけコミットしたか表示します。

• 作業履歴確認
  一週間の間で、どれだけ作業してどれだけコミットしたか確認できます。どんな内容のコミットをしたか確認できるようにしたいです。

• Qiitaの記事を見る
  休憩中にチラッと読めるQiitaの記事を垂れ流します。作業中は隠れます。

使ってよかったこと、よくなかったこと

• 効率があがる
  2時間ぶっ通して作業をするなら、ポモドーロを活用して作業した方が集中力が持続し、書ける分量も多かったです。

• 自分の時間の捌き方を認識できる
  かけた時間と作業を振り返ると、どんな箇所に時間をかけていて、どんなとこが手早くできているか確認できます。

• 疲れる
  25分間は実際短く感じました。時間に追われながら作業している感覚もあり、捗りますが慣れるまでは疲れました。

技術

DBとサーバにはFirebase、フロントはReact + Reduxを使っています。

Firebase Realtime DBはリアルタイムにデータが同期され、設定も簡単ですごく便利でした。ただ構造がRDBとは異なりツリー状になるので、要素にアクセスするとその子要素を全て取得します。多くのデータや複雑なデータを保持したい場合は注意しないとパフォーマンスが悪くなりそうです。無料なのにfirebaseはすごい。

React + Redux はCreate React Appで土台をつくり、Reduxなど追加しました。Create React Appはwebpackやbabelが分からなかった私でも簡単に作成でき、触りやすかったです。React, Reduxに関する記事や知見は多くて、初学者でも学びやすいと感じました。

感想

これから開発する際に使おうと思って作成したので、自分で使って欲しい機能はガンガン追加します。あとイケてない書き方のコードもたくさんあるので、修正します…

github.com

雰囲気でTwitterクライアントを作った

この記事はCPS Lab Advent Calenderの21日目の記事です。20日目の記事はものづくりの一年〜2017年を振り返ってみて〜です。22日目の記事はコーディングで編曲をした話です。

たこです。最近はラボで怪しい笛を吹いています。

2018-12-08 追記

この記事は古いので、現状ではこの構成でできないと思います。 ストリーミングAPIや、Twitter kitのサポートは終了しています。

つくったもの

CiderというTwitterクライアントです。
ぜんぜん完成とは言えない状態です。でもまあリリースしよう！と考えていたのですが、User Stream廃止日が決定してしまい、何ともタイミングが悪いです。名前のCiderはすっきりして使いやすいようなイメージから付けました。

Android開発

これまで大した開発をしたことがなかった私ですが、モバイルアプリケーション開発を始める事にしました。特にAndroidにする理由はなかったのですが、手元で動くと楽しいかと思って始めました。

使用した技術

Kotlin

JetBrains製の、JVMで動く言語です。JavaというよりはSwiftっぽいモダンな書き方ができて、サクサク書くことができます。
詳しい仕様は調べるとたくさん出てくるので割愛しますが、知見や公式のドキュメントが充実しているので、学びやすいと思います。
書いていると、いつの間にかJava書きたくなくなってきます。

更にKotlinにはKotlin Android Extentionという便利なプラグインがあります。ButterKnifeとかDataBindingとかfindViewByIdみたいに、レイアウトとコードを結びつけてくれます。…今回は使用してないけど。

Kotlin Android ExtensionsでfindViewByIdにサヨナラする

Twitter kit for Android

本当にあっさりTwitter APIを使う事ができます。

脳死でチュートリアルに従うだけで認証からツイート、読み込みまでできますが、考えなしにこれだけでクライアントを作ろうとすると、公式の劣化版みたいになってしまいそうな印象でした。

Twitter kitから使用できるのはREST APIのみで、Streaming APIは使用する事はできません。もしStreaming APIを使いたい場合はTwitter4jなど導入する必要があります。

Twitter kit内部ではRetrofit2というライブラリを使用して非同期処理を行っています。
Retrofit2のデフォルトでは、返り値をコールバックで処理するようになっています。よく言われるコールバック地獄は避けたかったので、レスポンスをRxJava2で処理するよう組み合わせました。

RxJava2

RxJava2を使用するメリットは色々ありますが、実際書いて良かったと思うことは、データの加工が楽になった事と、ネストが減り可読性が向上したことです。デメリットとしては、学習コストがかかる事と、メソッドチェーンによる塊感に個人差があるかもしれないです。個人的には導入して良かったと思っています。

Retrofit2のインスタンス作成時にRxJava2CallAdapterFactoryを与える事で、レスポンスをRxでのObservable等にラップする事ができます。

Twitter4j

上記の通り、Streaming APIを使用するために導入しました。もちろんAPIのキーやトークンはTwitter kitと同じ物を使います。

Streaming APIもRxJava2を用いて、Observableとして使用しました。TwitterのSteaming APIは1トークンにつき1本しか生やす事ができないので、複数のタブを使用しているCiderではその1本を共有する必要があります。RxにはHotとColdという考え方があって、これにはHot Observableを用いて対処します。 RxのHotとColdについて

Circle CI

継続的インテグレーションと言われるやつです。今回やってもらっている内容は、GitHubにpushした内容をCircle CIがビルドし、その結果をslackで教えてもらう…といったところです。もっとconfigを書いて様々な処理をしたいのですが、まだいじれていないです…。

インターン先で知ったのですが、モバイルではBitriseというCIツールが良さそうです。ビルド、テスト内容や使用するサービス（slackやDeployGate、テストなど）をグラフィカルに決める事ができるので、便利でした。

Glide

画像など活用するためのライブラリです。これもかなり手軽に使い始める事ができます。

Realm

モバイル向けのデータベースです。扱いやすく、高速な事がウリですが、今回はほとんど活用できていないです。これもかなり手軽に使い始める事ができました。

ハマりポイント

• Androidフレームワークの理解
  時間がかかりました。 書いてはググってを繰り返してました。

• 非同期処理
  AsyncTask？Volley？Retrofit2？
  Androidアプリケーションは、メインのスレッドでネットワーク処理を行おうとすると怒られます。非同期処理は避けては通れない道でした。
  Kotlinにはコルーチンの機能があるので、async/awaitで非同期処理を行う事ができます。これを利用してみるのもアリかもしれないです。 入門Kotlin coroutines

• ライフサイクル
  ライフサイクルを覚えるというよりも、何をしたいか明確にした上で、どのタイミング(ライフサイクル)を使えばいいのか調べています。

余談

1ヶ月以上放置してた言い訳はたくさんありますが、モチベーションが維持できなかったからです。最初のやる気である程度まで進める事ができても、その先も続けていくモチベーションの維持はもっと難しいような、簡単なような気がします。
あと、後々やりたくなった時ナニコレ…とならないように設計とか可読性とかコメントとかメモ書きは意識したいです。

このアプリにはない💀、新規性は1つのモチベーション維持方法として重要だと思いました。

所感

文字ばっかりで読みづらかったと思います…。かなり説明を端折る所もあったので、気になった方はぜひ検索してみてください。

先日インターンに行ったのですが、RxJava2を利用してFluxアーキテクチャで実装していたり、イケイケな感じでかなり刺激を受けました。講義課題が一段落したら自分もイケイケなアプリ作りたいです。

Android開発はコードだけでなく、画面レイアウトも作成するので学ぶ所が多かったです。ライブラリは触り程度だったので、RxとかKotlinの機能をガッツリ使って書こうと思います。

Ender2戦線

この記事はCPS Lab Advent Calenderの7日目の記事です。6日目は デルタ型３DプリンタBIQU Magicianの話 8日目は Thinkpad x230でhackintoshを作ろうとしてこけた話

2日続けて3Dプリンタネタが続いてしまいました。 研究室に届いた3Dプリンター、Ender2の組み立てからプリント、問題解決の記録についてまとめます。

出会い

Ender2と出会ったのは10月が終わりに差し掛かった時です。
有志のB3・B4で3Dプリンターを組み立てる事となりました。

昨日のアドベントカレンダーでも登場しました、HICTOP 3DP-21 ENDER2です。
HICTOP Portable 3D Printer DIY Kit with Heated Build Plate, Includes M - Hictop 3d printer

組み立て

このプリンターは海外製で、日本語マニュアルは付属していません。
その代わりでもないですが、組み立てビデオが付属しています。組み立て経験者もいなかったため、これを見ながら組み立てます。

雰囲気でやっていきます。

プリント

さっそくプリントです。
CuraというCADソフトを使用し、サンプルモデルをプリントします。Curaの設定はEnder2に付属pdfを参考に合わせます。 始動。

そして、完成。

なんだこれ。

後日、先輩が再度プリントを試みたところ、以下のようになんとか形を維持する事はできました。かわいい。

でも、このままでは実用できません。

フィラメントが上手く載らない

この問題は、ベッド（青い板のところ）とノズルの間隔が空きすぎていて、溶けたフィラメントが正常に載らないためでした。逆に近すぎていても、正常にプリントする事はできません。

Ender2のベッドには3つのネジがついていて、それらを回す事で高さを調整する事ができます。 PrepareからAuto Bed Revelingを選択し、ノズルとベッドの間隔を見ながらネジを回していきます。ベッドとノズルの間に紙が1枚入る程度が良いようです。
4角形の台を3つのネジで調整するのが難しい。

先輩に神調整をして頂いたあとの作品です。

素晴らしい。

ばかみたいに調整を繰り返していると、調整術が身につきます。
これで問題解決と思いきや、幾多の問題が。

プリント中にノズルが宙に絵を描く

プリントしていると、ある時間からフィラメントが出なくなり、虚空にプリントしだすようになります。

原因の1つとして挙げられたのが、Y軸アームです。 Y軸を固定するネジの1つが正常に固定されておらず、ガタついている状態でした。一度分解し、組み立てます。

ここでの注意は、ネジをしっっっかりと締め付ける事と、ベルトをピンと張らせる事です。アームの先の取り付け方でベルトのゆるみが調整できます。

これにより、プリント中のY軸アームのガタつきは改善されました。 ただ、フィラメントの詰まりは改善されませんでした。

溶けたフィラメントが詰まる

これが一番つらく時間のかかった問題です。30分程度のプリントは正常に完了するものの、ある時点でフィラメントが詰まり出なくなります。 詰まったら、フィラメントを押し出して詰まりを解消してあげます。

この問題を解消するため、幾つか解決案を試しました。

試したこと1 :プリント温度を上げる

とりあえずプリント温度を上げてみます。適正温度はPLAフィラメントは約190℃、ABSフィラメントは約220℃程度ですが、PLAフィラメントで240℃で印刷しました。

結果からいうと、これで詰まるまでの時間はかなり解消されました。ただ、ABSフィラメントではより高い温度が必要になるのと、ふとした時に何故か詰まってたりして、根本的な解決にはなりませんでした。

この時産まれたドロイドくんと仲間たち。

試したこと2 : ファン交換

いつの間にかファンが割れていて、本体がひどく振動していました。
正常に冷却できていない可能性があるため、Amazonから4mm x 4mm のファンを購入し、交換します。
振動は解消されたものの、詰まりは解消されませんでした。

試したこと3 : ノズルの洗浄

HICTOPサポートと連絡をとり、ノズルをクリーンにする事にしました。 一度分解し、ノズルを取り外します。 アセトンに2日ほど漬けて、付着したフィラメントを溶かします。再度組み付けます。

テストプリントしていたら、また詰まりました。

試したこと4 : 油壺の取り付け

油壺を取り付けると良いという情報をいただき、早速取り付けます。油壺についての詳細は以下をご確認ください。
3Dプリンターノズルつまり解消の基本技!! 「油壷」を解説するよー!!

それでもフィラメントは詰まります。ただ、油壺があると詰まりが解消しやすい気はしました。

ロボットも祈りながらプリント完了を待ちます。

祈りも虚しく、途中で詰まって終了。

試したこと5 : テフロンチューブを奥まで挿す

結論から言うと、これで解消しました。
HICTOPサポートとHICTOPエンジニアの方から、テフロンチューブ（フィラメントが通る白いチューブ）が上手く挿さっていない可能性があるので、一番奥まで挿してみてほしい、という提案をいただきます。

あらかじめ詰まりをキレイに取り除き、かなり力をかけてチューブを奥まで挿し込みます。

プリントすると…問題なくプリントできました。
その後、3時間に及ぶプリントも完了することができました。

テフロンチューブとノズルの間に隙間ができ、そこに詰まっていたのではないかと考えています。

結論

• テフロンチューブは奥までしっかり挿しこむ
• ベッドとノズルの調整をしっかりする
• 各ネジはしっかり締め付ける
• 困ったらサポートに確認してみる

思ったこと

研究室に入ってから一番多くの知見を得られたのが3Dプリンターな気がする。
HICTOPテクノロジーは24時間以内に必ず返信をするとしていて、サポートが手厚いと思った。一度金曜にメールをしたら月曜に返信が来たけれど、担当者曰く土日はしっかり休めたらしい。良かった。

自宅にEnder2を導入しようと思ったけど、残留したら使わないし、迷っている。
ソフト形だけじゃなくてハード系もバランスよくやっていきたい。