PC レスなモバイル作業環境 2019

blog.kondoumh.com

Pixel 3 のコンパニオンに買った iClever の折りたたみキーボードはけっこう当たりでした。Scrapbox にも書きました。

scrapbox.io

Termux 環境は言語学習や CLI プログラム開発の用途では十分いけます。今は Emacs に rust-mode を導入して Rust のブートストラップしてます。

Termux では苦しい Web UI 開発については、以前紹介した CodeSandbox がけっこう使えます。

blog.kondoumh.com

PWA として動作します。Showcase というか Sandbox モードでは非常に良い感じに Responsive に動作します。Editor モードはいまいち使いにくくなりますが、ランドスケープにしたらなんとか使えます。プレビューまでついててちゃんと動く。

Scrapbox も PWA で使えます。

このように Chrome は多くのサービスで第一級市民のブラウザであり、Android では iOS と違い Webkit じゃない本物の Chrome が動くので、デスクトップ向け Web アプリもけっこうちゃんと動きます。

最近、実家の事情で月1回ぐらい帰省していて、ラップトップ持っていくのが重かったですが、前回 Pixel だけでも色々と作業ができたので、短期間であればなんとかなることがわかりました。

ただ、Pixel で作業してるとバッテリーの消耗が激しくなるので、チャージャーの充電が気になり、ちょっとストレスも。やはり iPad を活用したいところではあります。

iOS にも Termux に相当する iSH というアプリが鋭意開発中ということを知り期待しています。

github.com

TestFlight で開発版を使うことができるのでインストールしてみました。

なかなかいい感じです。あとは、Chrome がちゃんと動いてくれるといいのですが。

こうなると Chrome OS のクラムシェルやタブレット端末も気になってきました。

今のところ、ターミナル作業と Chrome での作業が両方それなりのレベルで可能ということで、Pixel 3は悪くない選択肢ではあります。

2018 ふりかえり

Job

去年から引き続き Java EE の大規模プロジェクト。5月で一足先に卒業させていただきました。約2年間、会社としても大きな案件で色々とあったプロジェクトでした。

今年は Oracle の Java リリースサイクルとサポートの変更が発表され、各ベンダーからの OpenJDK サポート表明も話題になりました。業界的にはこのネタで仕事ありそうな感じがします。

6-9月は開発支援ツール系 PoC を作るプロジェクトに参加。Eclipse Che や Node RED などのアドオン開発、Node Express や Spring Boot 使ったプロト開発など、短期間で色々やって長期案件のリハビリになりました。TypeScript に覚醒しました。

10月からとあるプロダクト開発のお手伝い。コテコテのエンプラ開発ではあまり体験できない、Cloud Native で Infrastructure as Code な世界に来ています。

Personal Development

3年ぶりに iEdit 更新しました。MFC すっかり忘れてました。

Windows 10 / HiDPI 対応 blog.kondoumh.com

JSON 対応 blog.kondoumh.com

VS Code の拡張を作って公開というのもやってみました。

blog.kondoumh.com

Scrapbox の Electron クライアントとかも作ったり。

blog.kondoumh.com

GW あたりから GitHub に毎日草を生やすというのを始めてしまい、現在も続行中です。

iEdit も BitBucket から GitHub に引っ越したので草に貢献しています。チュートリアルやったりとかが多いですが、毎日何かしらコミットするネタを探すため、広く浅く手を出してみました。とりあえず着手への心理的障壁が低くなる効果はある気がします。

Writings

年明けから月2回はブログ書くという謎のノルマを自分に課してました。GitHub に草を生やす活動とも連動しました。投稿数としては過去最多になりました。

Chrome を筆頭に各ブラウザが 常時 SSL を必須とするようになったので、ホームページとブログを HTTPS 対応しました。

blog.kondoumh.com

blog.kondoumh.com

ホームページの方は静的サイトジェネレータに移行したいなと思ってますが、今年は構造見直しに終わりました。

blog.kondoumh.com

iEdit のサイトを GitBook + GitHub Pages でリニューアルしたりしてみました。

blog.kondoumh.com

Services

仕事も Cloud Native な感じになりましたが、年明けぐらいから個人でも AWS を使い始めたり、Cloud IDE を試したりしました。

blog.kondoumh.com

CodePen とか CodeSandbox も少し。

blog.kondoumh.com

blog.kondoumh.com

最近は GitLab を仕事で使っています。GitLab Flow にも慣れました。

about.gitlab.com

会社で Scrapbox が導入されたことで、組織でのユースケースを初めて体験しましたが、書きやすいし非常に好評です。リアルタイム更新やリンクによるネットワーク可視化など、より一層そのポテンシャルを実感するようになりました。

scrapbox.io

Trello のタスクは放置しがちになり、Google カレンダーのリマインダーを活用するようになりました。大抵の TODO はカレンダーと連動してくれた方が管理が楽だということに気づきました。

trello.com

そう言えば Inbox 終了のお知らせがありました。リマインダーもいい感じに混ざって使いやすかったのですが。

ありゃー pic.twitter.com/cJbbV90YzK

— MH (@kondoumh) 2018年11月17日

仕事での VS Code 利用比率が高まって、IntelliJ IDEA は Community 版でいいかなと思うようになりました。 Java 書く機会も減ってきましたし。

ニュース系では Menthas をよく見にいくようになりました。

menthas.com

このブログも何回か掲載されてました。

Ingress は ようやく LV 16 に到達し6周年の Ouroboros メダルはオニキスでした。

Ouroboros メダル来てた #ingress pic.twitter.com/AprnXRLXU8

— MH (@kondoumh) 2018年12月20日

Ingress Prime のローンチ直後は旧アプリ Deducted ばかり使ってましたが、今後は Prime の進化を見守りたいと思います。

Amazon Music Unlimited あまり使わないので解約して Spotify をフリープランで聴いてます。YouTube Premium はまだ試してません。

www.spotify.com

Anigif を作るツール。ソフトウェアの操作イメージを Web に貼るのに便利です。macOS 専用なので、Windows でも似たのがあるといいのですが。

gifox.io

Gadgets

Nexus 6P から Pixel 3 XL にスイッチ

blog.kondoumh.com

Echo Dot を買って Alexa Skill 開発にトライしましたが、Hello, world で終わってしまいました。

blog.kondoumh.com

MacBook Pro 13 Early 2015 がまだメインマシンです。Docker for Mac で Java の巨大プロジェクトをデバッグしたときに力不足を感じました。自宅ではそこまでヘビーなことは滅多にしないのですが。

会社支給マシンが軽量な Let's note CF-SZ6 になって Windows 10 でも macOS と同等の開発環境を構築して利用するようになりました。

scrapbox.io

バッテリーの持ちがもう少しよくて薄いラップトップ か 2in1 あってもいいなという気持ちです。

まとめ

今年は個人的にクラウド元年な気がします (今更)。

macOS Mojave にアップグレード - ダークモードとフォントレンダリング設定

年末なのでアップグレードしてみました。

30分ぐらいで完了しました。

デフォルトがダークモードになっていたのでそのまま選択。システム情報がダークに。

ファインダーもダークに。

ターミナルもダークに(もともと黒いですが)。

ゴミ箱もダークに。直近に起動したアプリを表示する領域ができてました。

Safari もダークに。iPhone のサイトもダークに。

せっかくなので、Chrome にもダークテーマを導入して統一感を出してみました。

chrome.google.com

ダークになった。

開発ツールやエディタはダークテーマが定番化していて、ツイッターもダークテーマ使ってたのでそれほど印象は変わりません。Web ページは Lite 系が多いですが、今後レスポンシブに Dark になることが求められるかもですね。

デスクトップのファイルをまとめてくれるスタック機能。便利かも。

非 Retina ディスプレイでのフォントレンダリングが汚くなるという話がありますが、自宅のディスプレイ (WQHD) では「ちょっと薄くなった？」という感じ。

試しにググって以下のコマンドを実行して再起動しました。

$ defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

コマンド実行前

コマンド実行後

やっぱり薄くなってた感じですね。

VMware Fusion のアップグレードは利用頻度が下がったのもあり、今年は見送ることにしました。

Pixel 3 XL を Linux マシンとして活用する

blog.kondoumh.com

Pixel 3 XL にスイッチして1ヶ月以上快適に使ってます。電話も6インチ超えになると iPad を持ち歩く意味も希薄になり、外出時はスマホだけあればいいというミニマリズムを追求したくなってきました。

iPad では VPS に SSH 接続してコード書いてました。

blog.kondoumh.com

Android でも同様のことはできますが、それよりも Termux というキラーアプリがあります。

play.google.com

これインストールするだけで root を取らなくても Linux 環境を利用できます。

github.com

多くのパッケージが提供され、pkg コマンドで簡単に導入できます。もちろん Node.js の開発も可能です。

$ pkg install nodejs

npm でエラーが出ますが、この issue のコメントに従って usr/lib/node_modules/npm/node_modules/worker-farm/lib/farm.js を編集したら動くようになりました。

github.com

Vue のアプリを起動して Chrome で localhost:8080 を開いて動作確認ができました。

Python、Go、Rust などの環境も構築できます。

しかしハイエンドスマホのスペックはちょっと前の PC を凌駕しているとはいえ、ここまで普通に Linux の開発環境が動くというのはすごい時代になったものです。

エディタは Vim や Emacs をターミナルでを使うことになります。SSH と違って tmux などを使わなくてもセッションが維持されますし、Termux 内で複数セッションをスワイプで切り替えられます。デスクトップでは VS Code しか使わなくなりましたがここにきて Emacs に回帰。 画面狭いので検索絞り込みインタフェースが適してるだろうと Anything か Helm 入れようとちょっと調べたら 最近は Counsel が人気のようなので M-x package-install counsel で導入しました。

Hackers Keyboard を使えば、Alt や Ctrl キーもポートレートモードで使えるので Emacs もそのまま使えます。

play.google.com

とはいえ物理キーボードは必要なので、軽くて本体にスタンドがついている iClever の折りたたみ式キーボードを買ってみました。

iClever Bluetoothキーボード 折りたたみ式 二つ折り スタンド一体型 軽量 薄型 ワイヤレスキーボード iPad iPhone用 iOS/Android/Windowsに対応 IC-BK11(ブラック)

ちょっとおもちゃっぽく、キー配列は変則であるものの意外と打ちやすく感じます。スタンドの安定感はいまいちですが、一体型である点を考慮すると許容範囲かなあと。あまりしっかりしたキーボードだと重くなってラップトップ持って行った方がいいという閾値を超えてしまうので。

小さい画面と小さいキーボードでの作業は体に負担がかかり長時間は厳しいですが、荷物が軽くなるのは助かります。次回帰省するときは Pixel だけで過ごしてみるつもりです。

タブ機能付きの Scrapbox クライアントを Electron で作る

今年から会社で Scrapbox が情報共有ツールとして採用されました。社内の情報が集まるようになって効果が出てきていると思います。

scrapbox.io

個人的には去年から Scrapbox を愛用しています。

blog.kondoumh.com

Chrome で2つの Scrapbox アカウントを使うのは、切り替えがちょっと面倒です。今年の春に Twitter Lite を Electron で使うために Electron 化してました。

blog.kondoumh.com

その流れで、Scrapbox も Electron アプリにして使ってました。アプリ側は会社のアカウントでログインしておけば、Chrome 側は個人アカウントで使えます。

Scrapbox を Electron 化してみた。なかなかいいかも。 pic.twitter.com/CkXlkva8WG

— MH (@kondoumh) 2018年6月14日

その後 Chrome が PWA 対応したので Electron 版 Twitter は使わなくなりましたが、Electron 版 Scrapbox は会社の情報見るのに時々使ってました。

最近、会社の Scrapbox のページがすごく増えてきて、アプリで1画面だけで使っていると不便になり、ブラウザと同様のタブが欲しくなりました。ということで久々に手を入れました。

タブ機能追加には、NPM パッケージの electron-tabs を使いました。

www.npmjs.com

Windows だと Ctrl キー、macOS だと ⌘ キーを押しながらページリンクをクリックすると、別タブでオープンするようにしました。現在のページを別タブに複製したり、URL をクリップボードにコピーする機能も追加しました。ページ内検索もタブ毎に効くようにしました。

ツールボタンとか文字だし、アプリアイコンは Electron のままだし、タブと WebView のスクロールバーが二重化したりするし・・・という状況なので、もうちょい調整したら GitHub の Release 機能でバイナリを配布してもいいかなと思っています。

github.com

12.18 追記) macOS と Windows のバイナリを置いておきました。

Release sbe v0.1.0 · kondoumh/sbe · GitHub

Scrapbox も PWA 対応してるので、単にデスクトップアプリとして使いたい場合はそちらを使うとよいと思います。デスクトップでタブも使いたい (かつブラウザとアカウント分けたい) ケースでは使えるかもしれません。

CodeSandbox : Playground 感覚な GitHub も使える Desktop PWAs 対応までしてるいいやつ

最近、CodeSandbox を使ってる人を見かけるようになりました

codesandbox.io

以前取り上げた CodePen はデザイナーも使う cool な JS Playground という感じで、ブログにデモとコードを一緒に貼り付けたりするのに便利でした。

blog.kondoumh.com

CodeSandbox はもう少しデベロッパー寄りのサービスのようです。

CodeSandbox のトップページの Create Soundbbox をクリックすると表示されるテンプレート選択ページで Sign in with GitHub ボタンからサインアップできます。

最近流行っているフロントエンドのフレームワークを数多くカバーしています。

コードエディタ + プレビューをブラウザの 1タブで使えます。

プレビューは別タブに出すこともできますので、Chrome DevTools などでデバッグも可能です。DevTools を使わなくても Console のログは見れます。

GitHub 連携は CodeSandbox の重要フィーチャーで、既存プロジェクトをインポートして開発できます。CodeSandbox 上でプロジェクトを作成して GitHub のリポジトリにエクスポートすることもできます。現時点では BitBucket などのサポートは無いようです。

Create Soundbox のページの下にある Import from GitHub のボタンから https://codesandbox.io/s/github に遷移して GitHub リポジトリの URL を指定します。package.json がプロジェクトルートに配置されていることが必要です。

プロジェクトが読み込まれプレビューも表示されます。

このプロジェクトは vue-cli で生成したものです。CodeSandbox にはターミナルはないので cli コマンドを叩くことはできませんが、プロジェクトの package.json を読み込んで裏でビルドしてくれます。create-react-app にも対応しています。各フレームワークが提供する CLI の規約を利用してコマンドを叩くことなく JS Playground 的な感覚で使えるのが CodeSandbox のウリのようです。

Document にもこうありました。

CodeSandbox is an online editor that's built for web application development. Web application development is a growing field, and with all new configuration options it becomes harder and harder to focus on writing code. We make this easier by doing most configuration for you.

インポートして実行までしてますが、この時点ではプロジェクトを表示しているだけです。左上の Fork ボタンをクリックすることでプロジェクトを取り込んで CodeSandbox 上で管理できます (新規作成時も同様)。

取り込まれるとエディタの左側にサイドバーが表示されます。

ダッシュボード画面にプレビューのサムネイルも追加されます。

GitHub 連携用の UI はまだ貧弱で diff なども見れませんが、ひとまず作業内容は push できます。

テストの実行も可能です。

なんと VS Code もブラウザ内で動きます(現状 Experimental ですが )。

さらに CodeSandbox は Desktop PWAs にも対応しており、インストールしてデスクトップアプリとして使うことも可能です。

]

ブラウザのタブに埋もれてしまいがちなので、Web IDE が PWA 対応するのはいいことだと思います。

最後に

CodeAnywhere や Codenvy のような汎用的 Web IDE はデスクトップでの作業をなんとか Web だけで完結しようというコンセプトのサービスです。

blog.kondoumh.com

CodeSandbox は React や Vue による UI 開発に特化し JS Playground 感覚で使えて GitHub 連携が可能な Web Editor ということで、既存の Web IDE とは明確にターゲットユーザーやユースケースが異なっている印象を受けました。Web IDE って実質 JS にしか使わない(使えない) しこういった割り切りは素敵だと思います。

Pixel 3 XL Just Black 64GB を購入

Nexus 6P 購入してから丸3年。

blog.kondoumh.com

Android の更新も止まってしまい iPhone に回帰しようかとも思いましたが、じっと待ってました。そして10月になり Pixel が3世代目で初めて日本に投入されました。

発表直後にプリオーダーして11月4日到着。付属品の数々。イヤホンジャックがなくなったので USB-C 用のアダプタも入っています。

Nexus 6P (左) と比べるとやや小ぶりになっています。Nexus 6P で使ってた IIJmio の Nano SIM を装着。Pixel 3 は eSIM と Nano SIM のデュアルではないかという噂もありましたが、日本版は Nano SIM オンリーでした。SIM スロットは本体下にあります。

セットアップ時に旧デバイスからの移行を選択すると、アプリデータ移行のため Nexus 6P と Pixel 3 を USB-C ケーブルと付属の Quick Switch Adapter で接続するようにガイドされます。画面のガイドに従っていくとあっという間に終わりました。クロスケーブルなのでネット経由しないのもよい感じです。まあ、ローカルにしかないデータはほとんど無いので必須の作業ではないですが、普段使うアプリのインストールがオートになるのでかなりシームレスになります。

狭額縁と切り欠き(ノッチ)により画面サイズが約1インチ大きくなっているのがわかります。

Nexus 6P も有機 EL ディスプレイで視認性は高いのですが、屋外ではやや暗めでした。Pixel 3 の屋外での視認性は Nexus 6P をかなり上回っているように思います。

サイズ感は Nexus 6P とほとんど変わらず、指紋認証のセンサー位置や、各スイッチの位置もほぼ変わらないので持ち運んでいるときの操作感もそのまま。ただ、背面がガラスでつるつる感が凄いので滑りそうです。

Android 9 Pie 初体験。スクリーンの最下列が Dock のように固定化され、検索窓も下に来て、ベゼルレスでも使いやすさが損なわれないように工夫されています。iPhone XS は店頭で触ったことがあるだけですが操作感も似ている感じです。

ということで Pixel ユーザになりました。Nexus 時代と比べてメジャー感が増し、スマートフォンのトレンドにキャッチアップした機種に仕上がっていると思います。カメラや FeliCa も試していきたいと思います。