kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

Fintie Apple Magic キーボードケース for iPad を購入

Anker の iPad キーボードカバー TC930 愛用してるんですが、突然 7, 8, 9, 0 のキー (Shift を押すと &, *, (, )) が入力できなくなってしまいました。

scrapbox.io

重量と取り回しの良さでは出色だったので別の選択肢がなかなかありません。

以前、Magic Keyboard と iPad の組み合わせが非常に良いという話を書きました。

blog.kondoumh.com

Magic Keyboard を iPad のコンパニオンとして持ち歩ければいいのですが、カバーと違って iPad スタンドがありません。Finite 製の Magic Keyboard ケースが良さげなのは以前から見ていましたが、国内未発売。今回 iPad キーボードを物色して Amzaon.jp を見ていたら、なんと同ケースが出品されていました。しかも4000円代。残り1点の表示で反射的にポチってしまいました。

Fintie Apple Magicキーボードケース

Fintie Apple Magicキーボードケース

こういうケースに Magic Keyboard をはめ込み

f:id:kondoumh:20180801001558j:plain

カバーの紐部分をこのように組み立て(マグネット製)

f:id:kondoumh:20180801001611j:plain

iPad を置く台をセットアップします。Magic Keyboard はジャストフィットではまるので安定感あります。

f:id:kondoumh:20180801001338j:plain

iPad との大きさ比較はこのような感じ

f:id:kondoumh:20180801001425j:plain

やはり iPad のカバータイプと比べるとかなり大きいです。

クラムシェルにならないので Surface 同様、スタンド部分の奥行きが必要です。iPad は固定されていないですが、膝上でも使えなくはないです。

で、結論としては使うかどうか微妙って感じです。

キーボードを取り出して、セットアップするまで数ステップあるので取り回しという点では、TC930 にはかなり劣ります。Magic Keyboard JP ということで Mac とほぼ同じ感じで入力できるところは Good ですが・・とりあえず新幹線移動などで使ってみようかと思います。

静的サイトの構造見直し

2年以上前に mh.home のデザインをリニューアルしました。

blog.kondoumh.com

この時は、Google Web Starter Kit を使いました。Material Design っぽい Responsive なページが作れて、BrowserSync でクロスブラウザテストが簡単。Gulp でのタスクパイプラインが用意されていてすぐに作成に取りかかれるというものでした。

github.com

2016 年までリリースされてましたが、更新止まってます。

静的サイトは更新頻度少ないので、たまにメンテしようとすると、NPM や Gulp のエラーが出て萎えます。HTML 書くのもだるいです。

最近は、static site generator が流行っているので乗り換え先候補として、React StaticHexo の使い心地を試してみました。Markdown で書けて更新楽そうです。

これらツールで生成されたサイトは、わかりやすいパス構造のディレクトリが掘られ、パスごとに index.html を配置するという構成になっています。かたや mh.home は適当な命名の html ファイルを直接参照する方式。static site generator を導入する前に今の構造を見直した方が良さそうです。

ということで、久々に Web Starter Kit のプロジェクトの package を更新して、Gulp のエラーを解消し、サイト構造を修正しました。

before after
Top /index.html /
Profile /profile.html /profile/
History /history.html /history/
Software /software/index.html /software/
iEdit /software/iedit.html /software/iedit/
iEdit Download /software/dliedit.html /software/iedit/download/
iEdit Tools /software/iedittools.html /software/iedit/tools/

パス構造がわかりやすく正規化されました。URL 末尾のスラッシュ (trailing slash) はファイルではなくディレクトリへの要求を表すことになるそうです。

既存のページへのリクエストをリダイレクトさせるため .htaccess で Rewrite を設定。

今回はここで力尽きました。

kondoumh.com

iPad でコードを書く Mid 2018 - Text Editor + SSH + SFTP を1アプリで

半年に1回ぐらい iPad でのコード書き環境を見直しております。外出先でコード書きたいけど MacBook は持って行きたくないというケースがちょいちょいあるので。

iPad と Cloud IDE の相性はイマイチ

Cloud IDE は iPad で常用するには時期尚早でした。物理キーボード使っても Ctrl キーが効かないとか、コンテキストメニューが出せないなどの制約が多いです。

blog.kondoumh.com

Chromebook で使うなら現実的だと思うのですが・・

blog.kondoumh.com

この記事では好意的な感じで書いてしまいましたが、今読むとちょっと先走った感があります。

あ、でも CodePen は iPad でも実用的に使えます。

blog.kondoumh.com

iOS マルチタスクも 9.7インチでは微妙

iPad でコーディングする上で便利に思える iOS の Split View も全然使わなくなりました。

blog.kondoumh.com

やはり 9.7 インチの iPad では作業領域が狭くなってしまうのが一番の理由だと思います。

iOS の SSH クライアント (Prompt など) を使う場合、バックグラウンドに回ってしまうとセッションが切れてしまい、接続し直しが面倒です。Split View に固定しておくことでセッション維持は可能ですが、それ以上に画面が 1/2 - 2/3 になってしまうところが厳しいです。12 インチの iPad Pro 向け機能と考えた方がよいでしょう。12 インチの iPad Pro 持ち歩くぐらいならラップトップ持ち歩くでしょうし。

フルスクリーンで、2つのアプリのタスクを固定できる方が 9.7 インチ iPad だと現実的だと思うのですが・・。9.7 インチでのマルチタスクはいざとなったら使えるオプションぐらいに考えるのがよい気がします。

テキストエディタアプリのオールインワン化

最近 Textastic が 7 にメジャーバージョンアップしてタブ対応し、ターミナルも内臓するようになりました。

Textastic Code Editor 7

Textastic Code Editor 7

  • Alexander Blach
  • 仕事効率化
  • ¥1,200

左側のファイルリストを表示せずに編集中のファイルを切り替えられて、エディタ画面の横幅を確保できるし、iPad を縦置きするとかなりの長さを表示できるので快適です。

f:id:kondoumh:20180712232218j:plain

ターミナルもタブの一つとして、アプリのプロセスの中に生きつづけるので、コードを書いてるうちに切断されてしまうということはありません*1

blog.kondoumh.com

この記事で書いたように Coda for iOS でも同じことができるのですが、テキストエディタの完成度は Textastic の方が上ですし、サイト管理的な機能が余計です。

ということで、Textastic が進化して iPad コーディング環境がかなり改善された感があります。

matagotch.hatenablog.com

id:matagotch さんのこの記事を読んで、GoCoEdit が気になったので、App Store で購入してみました。

こちらも、従来からタブ機能があり、ターミナルも内蔵していて Textastic を凌駕する存在だったようです。

GoCoEdit - Code & Text Editor

GoCoEdit - Code & Text Editor

  • Christoph Gogolin
  • 仕事効率化
  • ¥1,080

Textastic と GoCoEdit

実際使ってみると GoCoEdit は非常に完成度の高いエディタです。コードハイライトのカスタマイズも可能ですし、スニペット登録も可能。モダンテキストエディタの要件を満たしている感じです。特にいいと思ったのは、Emacs ライクなキーバインドです。Textastic の Emacs ライクキーバインドは中途半端で使えないと思った方がいいです。

ターミナルの完成度は、今のところ Textastic の方が上です。

ファイル管理については、Textastic はローカルにダウンロードして編集が終わったらアップロードしてリモートと同期する方式、GoCoEdit はサーバのファイルを直接編集する方式です。

ワークフローとしては、GoCoEdit の直接編集方式が楽ですが、リモートファイルを取得・列挙するのでレイテンシーが気になります。Textastic はフォルダ単位でローカルにキャッシュできるの作業開始は素早くできます。

まとめ

iPad ではオールインワンなテキストエディタと ConoHa とか EC2 の tc.micro の VPS インスタンスに回帰してしまいました。Cloud IDE や マルチタスクで複数アプリを使うよりも快適なので仕方ありません。まあ、適材適所というところでしょうか。

ところで Surface Go なかなかよさそうです。軽量 10インチ 2in1 でデスクトップ環境が普通に使えるというのは iPad でコードを書こうと足掻いている自分のような危篤なタイプにとってはかなり魅力的に見えます*2

www.itmedia.co.jp

*1:もちろんエディタ自身がバックグランドに行くと一定時間後に切れちゃいます。長時間のセッション維持が必要な場合は tmux などのターミナルマルチプレクサを利用すべきです。

*2:LTE モデルでメモリ8GBにしてタイプカバー付けて・・とかすると iPad よりかなり高くなりそうですが・・

JointJS でトイ・ダイアグラムエディタ

前回 CodePen でトイ・ダイアグラムエディタを作った時は、Konva.js を使っていました。

blog.kondoumh.com

今回は、JointJS で同様のトイプログラムを書いてみました。

JointJS: Visualize and interact with diagrams and graphs

f:id:kondoumh:20180708083705g:plain

JointJS 自体は、2014年末ぐらいから知ってはいました。

当時は、スマートデバイスへの対応が今一つという印象でしたが、3年ぐらい経つと当然のように対応してきて機能的にもかなり進化している印象です。 商用の Rappid というライブラリの基盤となっていて、作図関係の機能は Rappid と遜色ありません。Rappid には Undo / Redo とか Inline TextEditor などアプリ寄りの機能がアドオンされています。

Rappid and JointJS Comparison

最近 Node-RED Spring Flo などのパイプラインエディタを調査していて、Node-RED はエディタ機能を自前で作り込んでいてかなりコード規模が大きくなっているのに対し、Spring Flo のコードはシンプルなのでよく見たら JointJS を採用していたので、その存在を思い出しました。

Backbone.js に依存しているというのが時代を感じますが、使いやすい API を提供している機能豊富なライブラリに仕上がっています。

ダイアグラムエディタの JointJS 版は Konva.js 版と比べても 1/3 ぐらいのコード量でした*1。ノードやリンクの管理をお任せできてしまうので楽できます。

See the Pen JointJS-dia by kondoumh (@kondoumh) on CodePen.

*1:Konva.js 版は CoffeeScript で書いてるのでかなり短くなってるのですが。

Chrome で Desktop PWAs が実装されたので Twitter Lite を macOS デスクトップで使う

Chrome 67 の feature flags に Desktop PWAs が入って Android で使える PWA が macOS や Windows でも使える日が近づいてきました。

Chrome のタブを別ウィンドウで開いておくよりもデスクトップアプリらしい振る舞いをします。Chrome に限らずメジャーブラウザが対応中。かなり前から Chrome にはサイトをアプリケーション化する機能がありましたが、PWA が Web 標準であること、サイト側が PWA に対応することで、よりアプリらしい体験を得ることができます。

Desktop PWAs は Chrome 67 では無効化されているため chrome://flags で有効化します。

f:id:kondoumh:20180628003406p:plain

昨年末に PWA サイトとして話題になった dev.to や Twitter Lite で試せます。

dev.to

有効化して PWA 対応サイトに行くと、メニューに 「サイト名」をインストールしています... と表示されます。

f:id:kondoumh:20180628004023p:plain

メニューをクリックすると確認のポップアップが表示されます。

f:id:kondoumh:20180628004052p:plain

インストールをクリックするとアプリが、/Users/<user>/Applications/Chrome Apps.localized (「Chrome アプリ」フォルダ ) にインストールされます*1

f:id:kondoumh:20180628004908p:plain

起動すると Chrome とは独立したウィンドウで表示され、Dock にも専用アイコンが表示されます。

f:id:kondoumh:20180628005318p:plain

これで、ようやく Mobile Twitter サイト (Twitter Lite) をデスクトップアプリとして使えるので、連休中に作った Electron アプリを捨てられます。

blog.kondoumh.com

Electron アプリは Chrome を丸ごと動かしているようなものなのであまりたくさん起動したくありません。そうでなくても、VS Code や Slack などを常駐しているので。Chrome も1タブ1プロセスですが Electron アプリよりも軽量プロセスだと思います。PWA は Chrome の 1タブ程度のフットプリントと思われます。

ということで、早速 Twitter Lite をインストール

f:id:kondoumh:20180628010023p:plain

いい感じです。

f:id:kondoumh:20180628010044p:plain

*1:このフォルダには PWA アプリに限らず、Google のサービスのリンクもインストールされているようです。

本ブログの HTTPS 対応が完了

はてなブログが独自ドメイン運用のブログも HTTPS 対応を完了させました。

staff.hatenablog.com

本ブログも早速移行。

設定画面でポチッとするだけで意外とあっさり終わりました。独自の設定を何もしていないというのもあったと思います。数個の記事で混在コンテンツ対応しただけ (見落としもあるかもですが気付いたタイミングで直そうかと)。

これで管理してるサイトの HTTPS 化が完了しました。

blog.kondoumh.com

はてなブログの担当者の皆様お疲れ様でした。

VS Code の ChangeLog メモ用 Extension その後

年明けに作っていた ChangeLog 用 Extension

blog.kondoumh.com

日付+メルアドのヘッドライン挿入ぐらいしか作ってなくて、ローカルでアドホックに修正して使ってましたが、ちょいちょいコード修正するのが面倒になってきたので見直しました。

シンタックスハイライトの統合

まず、シンタックスハイライトの定義を別 Extension で作っていたので統合しました。

項目(タグ)のセットを挿入

ヘッドラインと一緒に定型的な項目(タグ)のセットを一式挿入できるようにしました。

f:id:kondoumh:20180609143752g:plain

VS Code 設定画面での設定

メールアドレスや、項目セットの設定を VS Code の設定画面で書けるようにしました。

f:id:kondoumh:20180608163957p:plain

設定用の JSON データのサンプルです。

    "changelog.mailaddress": "kondoh@local",
    "changelog.weekdayitems": [
        "task",
        "meeting"
    ],
    "changelog.weekenditems": [
        "running"
    ]

平日と週末で異なる項目セットを定義できるようにしました*1

スニペット

一括挿入ではなく個別に項目(タグ)を入力するためのスニペットを使えるようにしました。tag と打つことでスニペットが入力できます。

f:id:kondoumh:20180609143822g:plain

スニペットにするほどの入力量でもないんですが、まあ一応。

マーケットプレイスへの公開

めんどくさそうでまだやってません。

github.com

(2018.9.15 追記) マーケットプレイスに公開しました。

blog.kondoumh.com

*1:設定用の名前空間の衝突とかありそうですね。