※追記(2017/11/10)

11.2から、input_source_ifやinput_source_unlessというパラメータが増えて、もっとスマートにトグル切り替えできるようになりました。

https://github.com/pqrs-org/KE-complex_modifications/blob/master/docs/json/example_input_source.json


長らくWindowsでは右AltでIMEを切り替えていたので、Macを使うようになってからはKarabinerでも同じような設定にしてましたが、Sierraになってからは使えなくなり、「英かな」とか「前の入力ソース」のショートカットを組み合わせたりとかしてしのいでいたんですが、これが微妙にレスポンスがよくなかったりしたので若干ストレスになってました。

最近、Karabiner-ElementsのComplex Modificationsで設定がサクッとダウンロードできるようになってたので、ちょっと日本語入力の切り替え癖を矯正してみようかと、Macの日本語キーボード的な英数とかなキーの設定にしてました。

が、なんかたまたま、Karabiner-Elementsのリリースノートを見ていたら、Version 0.91.9のところに”variable_if”とか”set-variable”などというものを発見。
(英語だしちゃんと見てなかった)

これ、切り替えたステータスを保持しておいたら、ToggleIME的なことができるんじゃないのかと思って英数・かなキーのjsonを書き換えてやってみましたら、びっくりしたことになんかそれっぽく動いてます。

Karabiner-Elementsで1キーでかなと英数をトグルするサンプル

見たらわかるとおり、imemodeが0か1かでjapanese_eisuuを送り出すか、japanese_kanaを送り出すかだけ。
サンプル見て真似して書いただけなので、ちゃんとした書き方なのかとかシチュエーションによってはだめなケースがあるのかよくわかりませんけど、なんかまあ一応それっぽい感じ。

APIサーバーがASP.NET Core2.0、クライアントがReactNativeで作ったiOSアプリ(fetch)、メソッドを呼ぶ際にはヘッダに「X-HogeHoge-Key」などという感じのキーを指定する仕様、でどうしてもヘッダのキーが認識できない状況が発生。

postmanとかcurlとか別のものからの呼び出しは問題ないし、同じAPIサーバーとやりとりしているWebアプリは問題ない。

全く同じように書いたコードで、PHP(Slim Framework)で作った同じようなヘッダをセットするAPIのケースは問題ない(というかそこからコードを流用してきた)。

結局調べた結果、どうもReactNativeからfetchする際に、ヘッダが小文字化されてる?っぽく、サーバー側はcase sensitiveでキーを探しに行っていたためと判明。

こんな感じ。

if (context.Request.Headers.Keys.Contains(keyName))
...

HTTPの仕様では、ヘッダの文字列はcase insensitiveらしいので、サーバー側でキーをチェックする際に、

if (context.Request.Headers.Keys.Select(x => x.ToLower()).Contains(keyName.ToLower()))
...

こんな感じにしてやらないとだめでした。

ちょっとコンポーネントを使いたくてng-boostrapを入れたら、開発中とかdevbuildの時は問題ないのに、production buildをしようとすると謎のエラーを吐かれます。

ERROR in ./$$_gendir/~/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.ts
Module parse failed: C:\(省略)\$$_gendir\node_modules\@ng-bootstrap\ng-boots
rap\alert\alert.ngfactory.ts Unexpected token (13:21)
You may need an appropriate loader to handle this file type.
| import * as i2 from '@ng-bootstrap/ng-bootstrap/alert/alert';
| import * as i3 from '@ng-bootstrap/ng-bootstrap/alert/alert-config';
| const styles_NgbAlert:any[] = ([] as any[]);
| export const RenderType_NgbAlert:i0.RendererType2 = i0.ɵcrt({encapsulation:2,styles:styles_NgbAlert,
|     data:{}});
@ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 10:0-103
@ ./ClientApp/boot.browser.ts

細かいところはimportしているコンポーネント次第だと思いますが、「なんとか.ngfactory.ts」で「Unexpected token」だとか言うあたりは共通してると思います。

ライブラリの問題かと思って別のものに入れ替えてみたりしたんですが、どうもwebpackでtypescriptをコンパイルしている段階だし、devでは動作しているのでライブラリのせいじゃない。

心が折れそうになりながら調べていたら、

https://github.com/aspnet/JavaScriptServices/issues/1168#issuecomment-320026397

という情報を発見。

webpack.config.jsの20行目あたり

{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

こうなってるところの、「include: /ClientApp/」を削除します。

{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

これで無事にproduction buildも出来るようになりました。
どうやら不具合っぽいので、いずれ修正されるみたいです。

こういうタイプのトラブルは、出口のわかりづらい試行錯誤の繰り返しなので、なかなか心が削られます。

bootstrapのバージョンアップ

現時点ではまだbeta版なので、npmでバージョン指定をして更新します。

npm install --save bootstrap@v4.0.0-beta

popper.jsのインストール

bootstrap4はpopper.jsが必要です。

npm install --save popper.js

(.jsが付かない”popper”というnpmパッケージがあったりするので間違えないように。間違って.jsなしのをインストールしていてしばらくハマった)

webpackの設定を書き換える

webpack.config.vendor.jsの内容を変更して、popper.jsも処理されるようにします。

const nonTreeShakableModules = [
    (省略)
    'jquery',
    'popper.js'
];

44行目あたりにある、

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)

この行に、popper.jsの設定を追加します。

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)

完了

あとはwebpackでvendor関連を再構築したら完了です。

popper.jsやwebpackの変更をしない状態の場合、jQueryがどうとか、popperがないとかいうエラーが出ます。

あと、実行してみたらわかりますが、bootstrap4は3からだいぶ変わっているので、豪華なHelloWorldはちょっとおかしなことになります。もし3でなにか開発中の場合は全画面作り直すことは覚悟しないといけません。

webpackがまだいまいち把握できてないので、まだなんかいろんなところに手が届いてないような感覚が抜けません。さらにbootstrapだ、angularだと、調べないといけないことが多すぎてつらい。

環境的にVPNは欠かせないので、自分でさくらのVPSの一番安いやつで構築してます。CentOS7+xl2tpd+libreswanでL2TPというよくある構成です。
で、”万が一”が想定されるので、備えで常時二系統用意してあります。マスターはVPN専用ですが、バックアップは開発のテスト用サーバーなどに使っています。

が、ちょっとテスト用サーバーをクリーンな状態で再構築する必要があったのでしばらく前にOSからやりなおしたんですが、VPN環境をセットアップしてもVPNが繋がらなくなりました。接続は出来ていて通信が開始されたようなログになってるんですがそのあとすぐ切れてる様子。設定などは動いているものと同じなのでなんか間違ってるというわけではなさそう。

で、いろいろ設定見直したり、インストールしなおしたりしてたんですがだめだったんですが、まあバックアップ系統だったのでしばらく放置していたら、なんかマスターの方の接続が時々だめな状況に陥ることがあったので、バックアップをどうにかしないといけなくなりました。

もう一回全部やり直してマスターの設定と見直すんですが特に問題なく、八方ふさがり状態になったんですが、最後に気がついたのはxl2tpdのバージョンが上がってるということ。

マスターの方は1.3.6、新しくセットアップされていたのは1.3.8。

で、調べてみたら、

CentOS7のL2TP仕様が若干変わっていた

に、バージョンの違いで動作しなくなる話が出てました。
xl2tpdの設定で、crtsctsとlockがダメらしいのですが、確かに設定にそのオプションが入っていたので、コメントアウトしてみたらあっさりいけました。
確かに、セットアップ手順を書いているブログ記事などを見ていたらそのオプションが入ってないやつがあることは気がついていたのですが、さすがに自分の目の前で動いている設定だったのでそれを踏襲してました。

« Prev