はてなブログが独自ドメイン運用のブログも HTTPS 対応を完了させました。
本ブログも早速移行。
設定画面でポチッとするだけで意外とあっさり終わりました。独自の設定を何もしていないというのもあったと思います。数個の記事で混在コンテンツ対応しただけ (見落としもあるかもですが気付いたタイミングで直そうかと)。
これで管理してるサイトの HTTPS 化が完了しました。
はてなブログの担当者の皆様お疲れ様でした。
VS Code の ChangeLog メモ用 Extension その後
年明けに作っていた ChangeLog 用 Extension
日付+メルアドのヘッドライン挿入ぐらいしか作ってなくて、ローカルでアドホックに修正して使ってましたが、ちょいちょいコード修正するのが面倒になってきたので見直しました。
シンタックスハイライトの統合
まず、シンタックスハイライトの定義を別 Extension で作っていたので統合しました。
項目(タグ)のセットを挿入
ヘッドラインと一緒に定型的な項目(タグ)のセットを一式挿入できるようにしました。
VS Code 設定画面での設定
メールアドレスや、項目セットの設定を VS Code の設定画面で書けるようにしました。
設定用の JSON データのサンプルです。
"changelog.mailaddress": "kondoh@local", "changelog.weekdayitems": [ "task", "meeting" ], "changelog.weekenditems": [ "running" ]
平日と週末で異なる項目セットを定義できるようにしました*1。
スニペット
一括挿入ではなく個別に項目(タグ)を入力するためのスニペットを使えるようにしました。tag と打つことでスニペットが入力できます。
スニペットにするほどの入力量でもないんですが、まあ一応。
マーケットプレイスへの公開
めんどくさそうでまだやってません。
*1:設定用の名前空間の衝突とかありそうですね。
HHKB Pro JP を macOS High Sierra に最適化 - with Karabiner-Elements & DIP switch
Mojave ではどうなるかわかりませんが・・
macOS Sierra 以降 Seil が動かなくなりアンインストールして、Magic Keyboard だけで生活してきました。
久々に Realforce 91UBK を常駐先から持ち帰って、オールドな Windows キーボードもよいものだと思い、MacBook Pro に接続してみました。
91UBK はもう生産してないんですね*1。
接続してすぐに Seil がないから日本語と英語の切り替えがストレスフルだったのを思い出しました。この辺はもうそろそろ解決されてるんじゃないかとぐぐったら、Karabiner-Elements という後継ツールがいい感じに進化している模様。
早速インストールしたところ、変換 -> かな、 無変換 -> 英数 というマッピングが簡単にできて Seil の環境が復活しました。
常駐先での強い味方である Realforce 91UBK はテンキーレスではあるものの Magic Keyboard を使っている自宅の机にはちょっとでかいです。そこで、久々に Happy Hacking Keyboard Professional JP を引っ張り出してきました。サイズ感がちょうどよくて自宅使いにフィットします。
ただ、HHKB JP は Realforce と比べ、メインキーのサイズこそほぼ同じですが、最下段のキー(漢字、◇、Alt、無変換、変換、kana) がちんまりしていて、親指のポジショニングがシビアです。そこで、変換 の右にある kana も かな にマッピングしてしまいます。これで日本語と英語の切り替えで誤操作は無くなります。このマッピングは Realforce のようなフルピッチのキーキャップのキーボードでも設定してます。kana (カタカナ/ひらがな) って全然使わないので。
最下段キーが小さいことで、macOS の ⌘ を駆使するショートカットと、Alt 系のショートカット( Emacs のMeta など) で打ち間違う問題があります。特に、⌘ と Alt の位置が MacBook の配列と逆なので混乱を助長させます。これって入れ替えられないのかなあと HHK 裏面のディップスイッチの説明をよく見ると SW5 で入れ替え可能じゃないですか。
買ってから10年目で気づきました。早速 SW5 をオンにして、引き抜き工具で2つのキートップを入れ替えました。
FILCO Keypuller キーボードメンテナンス用キーキャップ引き抜き工具 ブラック FKP01
- 出版社/メーカー: FILCO
- メディア: Personal Computers
- 購入: 55人 クリック: 67回
- この商品を含むブログ (5件) を見る
ちなみに HHKB のディップスイッチ では SW1 を ON (◇ を ⌘ にマップ)、SW2 を ON (左 Fn を Ctrl にマップ) してます。左 Fn を Ctrl にすることで、Emacs キーバインドで多用する Ctrl を左小指の肉球で押せるため、左小指がつりそうになるのを防止できます。
最後に、漢字 です。HHKB JP の漢字 は 最下段の左 Fn の右という変態位置に申し訳程度に配置されていますが、これはさすがに誰も使っていないのではないかと思います*2。漢字 は Karabiner-Elements では grave_accent_and_tilde(`) という分かりづらい名前で指定できます。HHKB に限りこのキーを 左 Alt(option) キーに変えてしまいます。
これで、Alt の数が増えて打ちやすくなりました。キーボード毎にきめ細かく設定できるのも Karabiner-Elements の素晴らしいところです。
以上を纏めますと以下のようになります。
| マップ元 | マップ先 | 方法 |
|---|---|---|
◇ |
⌘ |
SW1 |
左 Fn |
Ctrl |
SW2 |
左 Alt |
⌘ |
SW5 |
⌘ |
左 Alt |
SW5 |
漢字 |
左 Alt |
Karabiner-Elements |
変換 |
かな |
Karabiner-Elements |
kana |
かな |
Karabiner-Elements |
無変換 |
英数 |
Karabiner-Elements |
ということで、自宅では暫く HHKB Pro JP (墨) に回帰してみます。しかし墨ってほぼ無刻印ですね。キートップの印字がくっきりしてるモデルの方がいいなあと10年経って思いました。
WPF に再入門中
久々に使うことになりそうなので、再入門しています。
.NET Framework 3.0 で Avalon のコードネームで搭載され、3.5 で WPF として登場した GUI フレームワーク。当時のプロジェクトで運用系ツールの画面で使いましたが、多くのプロジェクトでは Windows Forms が使われ続け早10年。ただ Silverlight, Windows Mobile, UWP, Xamarin ... と XAML 系 GUI プラットフォームが数年置きに登場する*1ため断続的に触っており、プログラミングモデル自体には結構なじみがあります。
XAML 編集用に Blend という別 IDE が提供されていますが、Visual Studio 本体でも地味に GUI デザイナーが進化しています。
リハビリがてら、RSS Reader 的なサンプルを作っているところです。
参考記事：[C# / WPF] 最新のC# 6.0でMVVMパターンを実装する
WPF 登場時はプロパティベースのデータバインディングが新鮮でした*2が、プロパティの更新通知のためにプロパティ名をハードコーディングしなくてはならず、リファクタリングでイベントが発火しなくなる恐れがあるのが残念でした。
private string hoge; public string Hoge { get { return this.hoge; } set { this.hoge = value; OnPropertyChanged("Hoge"); } }
C# 6 で nameof 演算子が導入されプロパティ名のリテラルが取れるようになったので、リファクタリングも大丈夫になりました。
private string hoge; public string Hoge { get { return this.hoge; } set { this.hoge = value; OnPropertyChanged( nameof(Hoge) ); } }
実は Behavior という Blend 由来の仕組みを使えば更新通知も簡単に実装できるようですが、別途 Blend SDK が必要となります*3。今回はとりあえず Behavior は使っていません。
- イベントハンドラではなく、Command バインディングで書く
- リモート API の非同期呼び出し - 呼び出し中に画面を固まらせない
- 呼び出し中の Command 呼び出し無効化 - 呼び出し中に更新ボタンを押せなくする
あたりを意識して書いてみました。
Command バインディング (正式な呼び方ではないかもしれません) は、画面のボタンに対応する Command を実装して XAML にバインドする書き方です。
<Button Content="Update" Command="{Binding FetchCommand}" />
Command の実装はこんな感じ。
class FetchRSSCommand : ICommand { // 中略 public bool CanExecute(object parameter) { return !Fetching; } public async void Execute(object parameter) { Fetching = true; var contents = await Task.Run(() => FetchRssAsync()); foreach (var content in contents) { _vm.Items.Add(content); } Fetching = false; } private Task<List<RSSViewModel.RSSContent>> FetchRssAsync() { using (var reader = XmlReader.Create(_vm.Url)) { var feed = SyndicationFeed.Load(reader); // 中略 var result = (from f in feed.Items select new RSSViewModel.RSSContent() { Title = f.Title.Text, Summary = f.Summary.Text, PubDate = f.PublishDate.DateTime, Link = f.Id }).ToList(); return Task.FromResult(result); } } }
XmlReader には非同期用メソッドがないみたいなので、取得処理を Task にラップして、async / await で呼んでます。
Execute の前後でFetching というプロパティを変化させて強制的に Button の Disable / Enable を切り替えています。
Fetching プロパティの実装は次のようになっています。
private bool _fetching = false; public bool Fetching { get { return _fetching; } set { _fetching = value; RaiseCanExecuteChanged(); } } public void RaiseCanExecuteChanged() { CommandManager.InvalidateRequerySuggested(); }
RSS 取得中かどうかを保持する bool 値 _fetching の setter で CanExecute 状態変化を通知するためのメソッドを呼び出しています。
昨今の JS の Single Page Application のような、非同期に Web API を叩いて結果を画面表示するアプリはサクッと書きたいのですが、なかなか定石が分からず迷いますね。.NET Framework や C# はがんがんバージョンアップしているので、ドキュメントもリニューアルされると嬉しいのですが、公式の WPF 関連情報は滞っている印象です
WPF のサンプルは msdn に取り残されてて、CodePlex へのリンクは切れている・・
— MH (@kondoumh) 2018年5月22日
今は UWP や Xamarin 推しなのでしょうけどエンプラユーザーのことも時々ケアが必要。
Electron 版 Twitter クライアントを急造 - macOS PWA 版までのつなぎ
2月に macOS の公式 Twitter クライアントはディスコンになりました。
僕のマシンでは最後の方は接続エラーが出まくるようになっていたので、使わなくなっていました。代替として推奨されている TweetDeck をインストールしたのですが、Web 版やスマートフォンアプリとの UI の違いが大きくて馴染めずに起動することもなくなっていました。
最近はずっと Chrome で Twitter やってましたがブラウザの1タブなので閉じてしまうことも多く、タイムラインが常駐している感じがなくなりました。
2月に Microsoft は Web フロントエンドディベロッパーの取り込みを狙って Windows 10 における PWA (Progressive Web Apps) サポートを発表しました。
Windows 10 UWP 版 Twitter アプリが先日 PWA 対応の一環でリニューアルされました。
Twitter のタイムラインでは使いにくいみたいな声が目につきましたが、ライトユーザーである (と思っている) 自分にはスマホと同じ UI で馴染みやすい感じでした。
VMware Fusion の Windows 10 で、新 Twitter アプリと Edge *1を並べて使うと macOS 本体側と Twitter & ネット記事閲覧環境が分離できていい感じになりました。
ボーっとタイムライン眺めてる時間と作業用スペースがスワイプで切り替えられるのでコンテキストの切り替えが楽になる気がします。
Edge なので Twitter で出会った記事をストックするために Pocket 拡張を入れました*2。でも Tumblr に Quote 流したいなあと思うとブックマークレット必要ですが Edge でブックマークレットを使うのはとてつもなく面倒そうに見えました。英語のページだったら翻訳して読んだりしたいし・・・ここで、仮想マシンに Chrome を入れたら負けです。
macOS でも PWA 対応は進められているようで、もう数ヶ月したら、Windows 10 と同様の PWA 版 の公式 Twitter アプリが AppStore に登場しそうな気がします。
それをちょっと先に体験したくて Electron で Mobile 版 Twitter サイトをデスクトップアプリ化するの試してみました。
ということで、https://t.co/zR6A5nmraR を Electron でデスクトップアプリにしてみた。こりゃ便利だ。 pic.twitter.com/mRVfnMVzlt
— MH (@kondoumh) 2018年5月3日
Electron は数年前に少し触ったきりだったので、ローカルの NPM パッケージが壊れてたりしました。公式サイトから Quick Start プロジェクトをダウンロードしてきて改造。起動時に外部リンクを開くための EventListener を追加したり、ウィンドウいっぱいに WebView 描画するようにした程度。
Mobile Twitter のシンプルな画面 はデスクトップでも邪魔にならないし、作業用とは別のデスクトップに 閲覧専用 Chrome のウィンドウを置いて、その隣に置くと 仮想マシンの Edge と Twitter アプリは不要になりました。
1日使ってみて、Mobile 版 Twitter をデスクトップで使うとスマホの引っ張って更新 (Pull to Reflesh) が使えないので、無意味に下にスクロールしたり、画面内リンク踏んだりしなければいけないところが微妙に感じました。PC 版サイトだと、未読ツイートが溜まってくるとツイートの一番上に 「新しいツイート n 件を見る」というリンクが勝手に出てくれるので楽です。
ということで、デフォルトは Mobile 版ですが、PC サイト版 Twitter に切り替えられるようにしてみました。PC 版だとユーザーアイコンにマウスオーバーするとユーザー情報をポップアップしてくれたり細かいところで使い勝手もよいですし。
これでかなり快適なタイムライン閲覧環境になりました。
自分用に作ったため特に配布予定はないですが、GitHub にソースコードは置いておきました。
PS. 作った後でこれ思い出した。
Typora - WYSIWYG でクロスプラットフォームな Markdown(GFM) エディタ
去年の記事ですが、これ読んで Typora 知りました。
この記事を書いたときは、モバイルも視野に入れてたので、デスクトップ専用アプリは見てませんでした。
Typora 公式サイト
Typora — a markdown editor, markdown reader.
今のところ Preview 版ということで無償で利用できます*1。
画面はとてもシンプルで、サイドバー出してないと「メモ帳？」っていう感じ。Theme も色々提供されているようです。おそらく Electron 製のアプリと思われます。
サイドバーは、見出しを Word のナビゲーションのように表示できるので、アウトラインプロセッサー的に使えなくもないです。
既存の Markdown エディタは (ATOM や VS Code などアドオン的な実装も含め) 、編集画面とプレビュー画面が分離しているものが普通でしたが、Typora は WYSIWYG な感じで見た目のスタイリングと Markdown 形式を両立させているエディタです。
Scrapbox と同様、画像や数式の行にカーソルが来るとインライン編集用エディタが現れ、画像のパスや数式やを編集できるという UI です。
通常表示
インライン編集時
通常表示
インライン編集時
テーブルは、インラインのツールバーから GUI で編集できます。
通常表示
インライン編集時
Scrapbox や Dropbox Paper など WYSIWYG 的サービスが流行っているので、このようなデスクトップアプリが出てくるのも自然な気がします。エディタというよりも、1周回って Word とか Pages のようですが。独自形式じゃないところが安心感あります。
ドキュメントによれば、Github Flavored Markdown (GFM) といくつかの拡張をサポートしているようです*2。そういえば、最近このブログは構造化とかせずにダラっと流し書きしていて Markdown ほぼ使ってなかったりしますが・・
各種プログラミング言語に対応したコードブロックももちろんあります。
箇条書きでは Emacs OrgMode 形式のタスクリストも作成できます。
ダイヤグラムについては、PlantUMLのような記法でシーケンス図やフローチャートを描けます*3。
フローチャート
シーケンス図
脚注書式 (footnote) も利用できます。
PDF 出力するとちゃんと脚注として出ています。
あと、ヘルプシステムがちょっと変わっていて、ヘルプドキュメントも Typora で記述され Typora に読み込まれて (別ウィンドウで) 起動します。
ということで Typora なかなか素敵な UI で文書作成に集中できそうです。本格的な原稿を Markdown ベースで執筆できます。ダイヤグラムなどグラフィカル要素も極力テキストで扱おうという思想が感じられます。
Scrapbox や Dropbox Paper もよいですが、ローカルファイルとして作成し Dropbox や Git で管理したい場合など、有力な選択肢になりそうです。こういうのが出てくるともう Emacs OrgMode も存在感薄くなってきましたね。
CodePen で手軽に Web UI を推敲する
HTML / CSS / JavaScript の Playground は JSFiddle などが有名ですが、結構前から CodePen と言うサービスが普及しているようで。最近になって知りました。
Qiita でも最近記事内に CodePen を埋め込めるようになったりしています。
類似サービスのまとめ記事
CodePen は Playground なので、大規模なプログラムを書くのには適していませんが、ライブラリの書き味とかを試すのに手元で環境を構築することなく開始できるのがよいところです。最近は、Web フロントエンドのメジャーなフレームワークは環境構築が一仕事になっており、余暇でやろうとしてもコードを書き始めるまでに力尽きることが多いため、お手軽さ重要です。
1枚の HTML ファイルに CSS/JavaScript を混ぜて書くぐらいの感じで*1、ライブプレビュー付きでコードを書けます。Popular なライブラリはクイックに追加できるようになっています。
CDN に配置されたライブラリの検索も楽ですので、好みのライブラリ・バージョンを使えます。
トランスパイラも選べます。
JavaScript のデバッグは Chrome の DevTools が使えますが、console.log で Console ウィンドウに情報を出せます。オブジェクトは JSON の Pretty print で出力されるので見易いです。 これなら、DevTools が使えない iPad の Safari や Chrome でもライブプレビュー、デバッグ出力を見ながらコードを書けますね*2。
数年前、Meteor がまだ勢いがあった頃に HTML5 Canvas を駆使するメディア系ライブラリ KineticJS を使ってダイヤグラムエディタのおもちゃを書いてたのですが、その UI 部分を CodePen で動くようにしてみました。
See the Pen Konva-dia by kondoumh (@kondoumh) on CodePen.
KineticJS をフォークした Konva.js を使いました。
CoffeeScript 久々に触りました。コードエディタが一画面なので、これぐらいの長さのコードになるとちょっとつらいですね。リファクタリングも手打ちですし。
CodePen ではこういった Pen と呼ばれるコード片の他に、Project を生成して Web IDE としても使える模様です。
追記) CodePen で Picked Pens 入りしてました。
