💫Tumblrクライアントを作りはじめた
記事の投稿に特化したTumblrクライアントを作りはじめた。
レポジトリ
https://github.com/mzp/tumblotte
動機
TumblrはリブログするだけのWebサービスでもなく、高機能なブログサービスでもあることに気がついた。
しかし、TumblrのWebUIは長文を書くのには向いていないので、Tumblrのクライアントを作りはじめた。
ElectronやReact.js等のJavaScriptまわりの技術にキャッチアップしたかった、という理由もある。
機能
- Tumblrへの投稿・更新
- Markdownのライブプレビュー
- 既存の投稿記事の取得
- 投稿先のブログの切り替え
- 投稿した記事をWebブラウザで開く
Kobitoを意識しながら作りはじめた。 が、インターネットが不自由な環境で作っていたので、思ったよりUIが似ていない。
名前の由来
どういう名前にするか相談したときに、Charlotteの一挙放送をしていたので、こうなった。
知見
- ElectronでOAuth認証をする方法は Electron. oAuth authentication with GitHubを参考にした。
- Tumblrに投稿にするにはtumblrを使っている。しかし、いくつか機能が不足していたので、自分でforkして拡張した。mzp/node-tumblr
- tumblrwksを使ったほうがよかったかもしれない。
- "electron boilerplate" で検索したら、5つくらいでてきてツラかった。 結局、boilerplateは使わずに自分で書いた。
画像で見る開発の流れ
開発開始直後(2015/12/30)
PureCSSのEmail layoutをざっくりあてた直後。まだ表示ができるだけで、投稿等はできない。
基本機能完成(2015/12/31)
UIの調整(2016/1/1)
FontAwesomeを使って、各ボタンにアイコンを割り当てていった。
ログイン機能(2016/1/2)
ここまでAccessTokenは固定だったので、ログイン機能をつけた。ログイン画面をどうするか迷ったあげく、結局ボタン1個だけを配置した。
投稿先ブログの切り替え(2016/1/3)
投稿先のブログを切り替えれるようにした。
代償
新年二日目にして、通信速度が制限された。
— mzp (@mzp) 2016, 1月 2⚠️AquaSKK with iCloud
☁️AquaSKKのiCloud対応 - みずぴー日記の内容を整理した上で、パッケージを作成した。 自分で試すためのが主な目的なので、他の人が利用することはあまり想定していない。
Release iCloud対応(1) · codefirst/aquaskk · GitHub
注意点
- 今後、データの持ち方を変える可能性がある。 その際は、同期データがすべて消失する。
- ローカルのユーザ辞書が破壊される可能性がある。実際、開発中に二度ほど破壊した。
- その他、予期しない動作をするかもしれない。
何かあったらiCloud対応PRに書いてほしい。 対応できるかどうかは分からない。
リリースするまでに解決しなければいけない課題
ビルドに必要な証明書の管理
iCloudに接続するために、AquaSKKにひもづいた証明書が必要となった。 その証明書は、ローカルにしか存在していないので、以下のような問題が生じる。
- AquaSKKのビルドを他の人ができない。 そのためチーム開発が困難になる。
- TravisCI上でビルドを行なえない。
FlickSKKとの共有をどうするか
FlickSKKのビルドは@banjunが自分のIDで行なっているので、AquaSKKのiCloud領域にはアクセスできない。
辞書の形式はほぼ同一なので、なんとか共有できるようにした。個人アカウントの制約のようなものなので、起業したほうがいいかもしれない。
x86対応
iCloud対応のために用いているCloudKitがx86_64バイナリしかないため、x86に対応できない。
最近のOS Xもx86では動かないようだし、対応をやめてもいいと思っている。
前回からの変更内容
レコードIDの変更
前回は見出し語は重複しないものとして、見出し語をレコードIDとして用いていた。
しかし、以下のように見出し語が重複している場合もありえるので、見出し語をレコードIDとして用いるのをやめた。
;; okuri-ari entries. わるi /悪/ ;; okuri-nasi entries. わるi /悪/
同期用スレッドの統一
前回は、ローカルの辞書をiCloudに送信するスレッドと、iCloudから取得したデータをローカルの辞書にマージするスレッドを別々にしていた。
そのせいでコードが複雑化していたため、すべて1つのスレッドで行なうようにした。
コードの整理
今後メンテナンスすることを考えて、コードを整理した。
- コピペですませていた部分を共通化した。
- Objectvie-CとC++の部分を増やし、Objective-C++部分を減らした。
SKKのユーザ辞書、完全にぶっこわした感ある
— mzp (@mzp) 2015, 12月 26キーボード二刀流を初めて三ヶ月弱が経過した
キーボード二刀流というのはこういうやつ。 肩凝りが改善するという話だったので初めてみて、三ヶ月弱が経過した。
要約
肩凝りは特に改善も悪化もしていない。
所感
- 初めて最初の3時間くらいは違和感があった。すぐ慣れる。
- たまに手をホームポジションに戻すのをミスったりする。
- 机がちょっとだけ狭くなった。
- トラックパッドをどこに置くのがいいかよくわからない。今は右手のすぐ下に置いている。
- 使えるキーボードが2倍になったので死蔵してたキーボードが減った。よい。
- 多少肩が楽になった気がする。
- オフィスでも二刀流にしてたら、「この会社にはモニタを2台使ってる人も、キーボードを2台使ってる人もいるの...。こわい...。」って言われた。
🏁 AquaSKK 4.3.3: MS Excel 2016対応
Office 2016のExcelでモード切り替え時にl/L/qが入力されないようにした by zalt50 · Pull Request #38 · codefirst/aquaskk · GitHubを取り込み、AquaSKK 4.3.3をリリースした。(thx to zalt50)。
ダウンロード
https://github.com/codefirst/aquaskk/releases/tag/4.3.3
変更内容
MS Excel 2016で、l/q/Lなどによる入力モードした場合、l/q/Lなどが入力されてしまう問題が修正された。詳細は#13を参照してほしい。
余談
ちなみにExcel 2011では問題なく動くらしい。動くことを確認した人が「骨董品での動作報告はちょっと…」ってdisられていたけど。
☁️AquaSKKのiCloud対応
パッケージを作って ☁️AquaSKK with iCloud - みずぴー日記 に置いた。
AquaSKKのユーザ辞書をiCloudで同期するようにした。 自分の使っているMacBookとiMacで辞書を共有できるようになった。
現状
cloudkitブランチに最新の内容がpushしてある。 いくつかのコーナーケースが残っているが、実用上の問題はないと思う。
もうちょっと完成度があがったら、ベータ版のインストーラとか作ると思う。
iCloudの使い方
iCloudを使う方法は4種類ある。 それぞれの特徴については[iOS 8] CloudKit を使ってみよう (1) 概要 ｜ Developers.IOの冒頭に簡潔にまとまっている。 Appleの文書だとiCloud設計ガイド(PDF)がよい。
この4種類のどれを使うかはかなり悩んだが、今回はCloudKtiを使うことにした。
- Key-value Storage
- 1MBまでしか保存できないので、容量が不足している。
- iCloud document storage
- ファイルベースを意識することになるので、単語登録したときの競合解決を実装するのが大変そう。
- Core Data storage
- 現時点でCore Dataを用いていないので、あまり利点がなさそう。
- CloudKit
- iCloud上に構築されたKVSとして扱えるので、辞書データをそのまま格納できそう。 また、CloudKit dashboardで登録されたデータを確認できるので、開発が楽そう。
保存領域
CloudKitにはどのユーザでもアクセスできるpublic領域と、そのユーザしかアクセスできないprivate領域がある。 public領域の容量はアプリによって決まり、private領域の容量はユーザのアカウントによって決まる。(参考: Designing for CloudKit)
AquaSKKの辞書はprivate領域に格納するようにしたので、他のアカウントから辞書データにアクセスすることはできない。また辞書データはユーザのiCloud driveに保存される。
主な構造
SKKのエンジンが直接iCloudと通信するのを避け、中間にユーザ辞書を挟む方式を採用した。
- SKKのエンジンは、これまで通りユーザ辞書に対して単語の検索・登録を行なう。
- 同期するためのクラスがユーザ辞書を読み込み、更新分をiCloudに送信する。
- 定期的にiCloudの更新を確認し、更新があった場合はユーザ辞書に単語を追加する。
単語を検索するたびにiCloudと通信する方法も検討したが、ネットワーク通信ができない環境での利用を想定して断念した。
単語の削除
基本的に、iCloudから取得した単語をローカルの辞書にマージすることで、辞書の同期を実現している。 ただし、それだけでは、辞書から単語を削除しても簡単に復活してしまう。
そこで、「ユーザ操作によって削除された単語」は別枠で管理するようにし、ここに登録された単語は同期のタイミングでユーザ辞書から消すようにした。
同期状態の表示
同期状態を通知するために通知センターを利用している。
Dropboxのようにメニューバーに出しているアイコンで通知したかったが、InputMethodのアイコンを動的に変化させることができなったため断念した。
通知センターに用いられるアイコンはシステムにキャッシュされるらしく、AppIconを更新しても反映されなかった。 バージョンやビルド番号を更新すれば反映された。
設定画面
設定画面からiCloud同期の有効・無効化を切り替えれる。 無効にした場合はこれまでと同様の動作をする。
その他の知見
- CloudKitの使い方はccabanero/ios-cloudkit-snippets · GitHubがシンプルにまとまってて、よかった。
- ただし、CloudKitからは一度に100件しかレコードを取得できないので、ページングが必要になることは書いてないので、注意が必要。
- まさしブログ: CloudKitでページング読み込みを参考にした。
- テストにはL辞書にない単語を使う必要があったので、ゆるゆりの登場人物名を使っていた。 特に、同じ読みの単語がない「歳納」と、同じ読みの単語がある「赤座」の2つが便利だった。
- AquaSKKのエンジン部はC++、CloudKitを利用する箇所はObjectvie-Cなので、Objective-C++を使うことになった。 いわゆる「文字列」に対応する型が、
const char[]、std::string、NSString*の3種類登場してつらかった。
💪3D Touchサポートの実験
FlickSKKで3D Touchをサポートするために、いくつかの実験的な実装を行なった。
既存のAPIの問題点
iPhone 6s/6s Plusで3D Touchが搭載されたが、APIから利用できるのは以下の3機能のみ*1である。(参考: iOS - 3D Touch 概要 - Qiita)
- home screenにおけるQuick Action
- peek/pop
- 圧力感知(フィードバックなし)
そのため強く押されたときに、フィードバック付きで任意のアクションを実行することはできない。
実現したこと
- 押す力が一定値以下の場合は何もおきない。
- 一定値以上になると、押す力に応じて画面にぼかしをかける。
- さらに強く押すと、hapticによるフィードバックが発生し、漢字変換を開始する。
要素技術
Taptic Engineによるフィードバック
TapticEngineを直接使うAPIは公開されていない。 しかし、公開されていないだけで実装はされているので、ヘッダファイルを自分で書けば利用できる。(参考: Using Taptic Engine on iOS · Unified Sense)
#ifndef Taptic_h #define Taptic_h #import <UIKit/UIKit.h> @interface UITapticEngine : NSObject - (void)actuateFeedback:(int)feedbackType; @end @interface UIDevice (Private) - (UITapticEngine *)_tapticEngine; @end #endif /* Taptic_h */
使い方は以下の通り。
UIDevice.currentDevice()._tapticEngine().actuateFeedback(1001)
押下時のぼかしの適用
押してる圧力は分かりづらいので、画面上になんらかのフィードバックを出すようにしたほうがいい。 今回は、圧力に応じて、画面にぼかしをかけるようにした。
UIBlurEffectを利用しようとしたが、ぼかしの強さを変更できないので断念した。
そこで、画面のスクリーンショットを取得し、UIImage+ImageEffects.hを用いて、ぼかしをかけるようにした。
その他
より具体的なことはPull request #143を直接見れば分かる。 特にForceTouch.swiftに説明コメントが多めにはいっている。
🔡AquaSKK 4.3.0: 拡張ローマ字入力AZIK/ACTの対応強化
拡張ローマ字入力の変換ルールを拡張したAZIK、ACTに対応したAquaSKK 4.3.0をリリースした。
ダウンロード
https://github.com/codefirst/aquaskk/releases/tag/4.3.2
(追記: リリースミスをしたのでバージョンをあげました)
拡張ローマ字入力AZIK/ACTとは
AZIKは通常のローマ字変換規則を拡張し、頻出するパターンを高速で入力できるようにしたものである。 例えば「k」が「inn」と同じ意味になっているので「ゆるゆりんりんりんりんりん」は「yuruyurkrkrkrkrk」で入力できる。
詳しい入力方法はAZIKとは (エイズィックとは) [単語記事] - ニコニコ大百科にまとまっている。
ACTはAZIKをDvorak配列用に移植したものであり、こちらはACT (AZIK on Dvorak)が参考になる。
既存のAquaSKKのAZIKの問題点
4.0以降のAquaSKKはAZIKに対応していたが、いくつかの問題点がある。
4.3.0ではこれらの問題を、ddskkの挙動に準ずる形で修正した。
バージョンアップ時の注意点
AZIK等の設定は、設定画面を閉じるときに更新される。そのため、すでにAZIKを使ってる場合は、一度設定画面を開き、閉じる必要がある。
余談
修正点: 補助ルールの拡張
AZIK/ACTを有効にした際にキー設定を切り替えれるようにするために、sub-rule.desc を拡張した。
# AZIKの場合は、azik.confからキー設定を読み込む azik.rule azik.conf 拡張ローマ字入力「AZIK」を使う(JIS配列用) # ACTの場合は、act.confからキー設定を読み込む act.rule act.conf 拡張ローマ字入力「ACT」を使う
act.conf は以下のようになっている。
# q/Qの設定をクリアする NotToggleKana q NotEnterJapanese Q # q(keycode 0x21)に機能を割り当てる ToggleKana keycode::21 EnterJapanese shift::keycode::21
ちなみにキー設定ファイルの書き方をミスするとAquaSKKが起動しなくなる。 そのときは ~/Library/Preferences/jp.sourceforge.inputmethod.aquaskk.plist を消すとよい。
修正点: 送り仮名の正規化
ACTではカ行を入力するkの代わりにcを使う。そのため、従来のAquaSKKでは「ICu」と入力した場合「いc」でSKK辞書を検索してしまい、正常な変換ができなかった。
そこで今回からは、変換前に送り仮名の正規化を行なうようにし、この問題を修正した。
類似の問題はAZIK/ACTの「っ」についても存在したが、これで修正される。
修正点: SKK日本語入力FEP互換の記号入力の修正
📦AquaSKK 4.2.7: SKK日本語入力FEP互換の記号入力 - みずぴー日記で導入したSKK日本語入力FEP互換の記号入力だが、いくつかの変更を行なった。詳細は #34 を見てほしい。
@mzp AquaSKKの改良で参考にしていただきありがとうございます。実は次の版から、記号入力(z`)の文字を「〆」に変更する予定です。元の設定は利用頻度が少なく対となる文字の入力にモード変更が必要という問題があり、逆に打鍵数が増えてしまうというのが理由です
— どうしてcoなった (@coexe) September 27, 2015@mzp ありがとうございます。ちなみにこれはEggというEmacsの日本語入力のルールを元にしています。EggからSKK8に環境を移行した際、利用頻度が高く便利だった文字を引き継いで細々と使ってきたものです。可能ならEggの名称を設定名のどこかで使っていただけると嬉しく思います
— どうしてcoなった (@coexe) September 27, 2015バージョン番号
雑につけているのもどうかと思い、semverっぽくした。 機能追加なのでminor versionが加算されている。
最速入力
AZIKを初めてまともに見たのだが，「ばんじゅん」が最速で入力できることと，日本語に本当に「～ん」が多いのが分かった。(AZIKモードでゆるゆりんりんりんりんりんの歌詞を試しに入力しながら) https://t.co/N2Wp1IIujI
— ばんじゅん(!!) (@banjun) October 15, 2015