kondoumh のブログ

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

CodePen で手軽に Web UI を推敲する

HTML / CSS / JavaScript の Playground は JSFiddle などが有名ですが、結構前から CodePen と言うサービスが普及しているようで。最近になって知りました。

codepen.io

Qiita でも最近記事内に CodePen を埋め込めるようになったりしています。

qiita.com

類似サービスのまとめ記事

www.webprofessional.jp

CodePen は Playground なので、大規模なプログラムを書くのには適していませんが、ライブラリの書き味とかを試すのに手元で環境を構築することなく開始できるのがよいところです。最近は、Web フロントエンドのメジャーなフレームワークは環境構築が一仕事になっており、余暇でやろうとしてもコードを書き始めるまでに力尽きることが多いため、お手軽さ重要です。

1枚の HTML ファイルに CSS/JavaScript を混ぜて書くぐらいの感じで*1、ライブプレビュー付きでコードを書けます。Popular なライブラリはクイックに追加できるようになっています。

f:id:kondoumh:20180422145301p:plain

CDN に配置されたライブラリの検索も楽ですので、好みのライブラリ・バージョンを使えます。

トランスパイラも選べます。

f:id:kondoumh:20180423011822p:plain

JavaScript のデバッグは Chrome の DevTools が使えますが、console.log で Console ウィンドウに情報を出せます。オブジェクトは JSON の Pretty print で出力されるので見易いです。 これなら、DevTools が使えない iPad の Safari や Chrome でもライブプレビュー、デバッグ出力を見ながらコードを書けますね*2

f:id:kondoumh:20180422155108p:plain

数年前、Meteor がまだ勢いがあった頃に HTML5 Canvas を駆使するメディア系ライブラリ KineticJS を使ってダイヤグラムエディタのおもちゃを書いてたのですが、その UI 部分を CodePen で動くようにしてみました。

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

KineticJS をフォークした Konva.js を使いました。

github.com

CoffeeScript 久々に触りました。コードエディタが一画面なので、これぐらいの長さのコードになるとちょっとつらいですね。リファクタリングも手打ちですし。

CodePen ではこういった Pen と呼ばれるコード片の他に、Project を生成して Web IDE としても使える模様です。

追記) CodePen で Picked Pens 入りしてました。

f:id:kondoumh:20180425010112p:plain

*1:実際、Pen を export すると、index.html / index.js / style.css ぐらいの単純構成です。

*2:今回の記事タイトルを「iPad でコードを書く - CodePen 編」にしようかとも思ったのですが、iOS のブラウザだと、テキストエディタの検索用キーショートカットが ⌘ + F になっててブラウザの方に吸われてしまい、長いコードは書きづらいということでやめました。

AWS Lambda で Alexa スキル開発 (Hello World 編)

blog.kondoumh.com

Echo Dot 買ったら Alexa スキルで Voice UI 開発ということで Hello World してみました。

Alexa スキルは AWS Lambda で実装しますが、以前 Web IDE の Cloud 9 を試すときに AWS アカウントを作っていたのでしばらく無料で試せます。

blog.kondoumh.com

Alexa Skills のエンドポイント作成とテストは AWS ではなく Amazon Developer のサイトで行います。AWS 側では Lambda 関数を作って Alexa とのやり取り部分を実装します。

developer.amazon.com

Amazon Developer では普段使ってる Amazon のアカウントでログインすべきで、新しくアカウントを作るとハマるそうです。

Alexa 開発者アカウント作成時のハマりどころ : Alexa Blogs

ブラウザのタブを2枚開いて Alexa Developer Console (Amazon アカウント) と Lambda Management Console (IAM ユーザ) を交互に操作して開発を進めます。

そもそもクラウド開発に不慣れなオンプレミスディベロッパーなので Hello World もすんなり行きませんでした。公式チュートリアルを見ても AWS の設定画面の方が更新されてますし。権限もよくわかっておらず・・・。

AWS では作業用アカウントはルートアカウントではなく、必要な権限のみ付与した IAM ユーザとして作成するのがベストプラクティスとされています。前回 Cloud 9 を使うために IAM ユーザのグループに AWSCloud9User を割り当てていて、今回新たに AWSLambdaFullAccess を追加しました。これで Lambda の機能はフルに使えるはずですが、Lambda Management Console で 関数を作ろうとしてると権限が足りないエラーが。

not authorized to perform: iam:CreateRole on resource: role/lambda_basic_execution

エラーが出る度にびルートで IAM Console にログインして権限を追加。権限設定ができるまでは IAM ユーザでログインしたメインのブラウザ(Chrome など)と IAM Console にログインしたサブのブラウザ(Safari など)を起動した方が楽です*1 。結局、グループに割り当てた AWSLambdaFullAccess に加えて、インラインポリシーとして iam:PutRolePolicyiam:CreateRole を追加する必要がありました。

f:id:kondoumh:20180406151602p:plain

これで Lambda 関数の追加ができるようになりました。今回は設計図(テンプレート)から作成を選びました。

f:id:kondoumh:20180406152359p:plain

設計図としては、alexa-skill-kit-sdk-factskill を選択。

Lambda の編集画面には Cloud 9 のエディタがプロジェクトごと埋め込まれていました (フルスクリーンにして利用可能です)。

f:id:kondoumh:20180406154409p:plain

ひとまず Lambda 関数を作成したら、Alexa Developer Console 側でスキルの対話モデルを定義します。まずスキルの呼び出し名をつけてインテントを追加します。テンプレートが太陽系の惑星についての豆知識を教えてくれるサンプルになっていたので、「惑星くん」と名付けました。インテントは適当に Sandbox としておきました。

f:id:kondoumh:20180406153313p:plain

サンプル発話の登録画面です。今回は適当に1個追加したのみです。

f:id:kondoumh:20180406153655p:plain

対話モデルを 「JSON エディター」で見ると以下のようになりました。

{
    "interactionModel": {
        "languageModel": {
            "invocationName": "惑星くん",
            "intents": [
                {
                    "name": "AMAZON.HelpIntent",
                    "samples": []
                },
                {
                    "name": "AMAZON.StopIntent",
                    "samples": []
                },
                {
                    "name": "AMAZON.CancelIntent",
                    "samples": []
                },
                {
                    "name": "Sandbox",
                    "slots": [],
                    "samples": [
                        "教えて"
                    ]
                }
            ],
            "types": []
        }
    }
}

次に、スキルのエンドポイントの設定です。Lambda Management Console で作成した関数の ARN を設定します。

f:id:kondoumh:20180406154156p:plain

Lambda Management Console の Cloud 9 エディタで関数を編集します。

'use strict';
const Alexa = require('alexa-sdk');
const APP_ID = 'amzn1.ask.skill.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;
const SKILL_NAME = 'MyFactSkill';
const GREETING_MESSAGE = "オーケー: ";
const HELP_MESSAGE = 'You can say tell me a space fact, or, you can say exit... What can I help you with?';
const HELP_REPROMPT = 'What can I help you with?';
const STOP_MESSAGE = 'Goodbye!';

const data = [
    '水星の1年は88日だよ。',
    '太陽からの距離は水星より遠いにもかかわらず、金星は水星より気温が高いよ。',
    '金星は反時計回りに回転するよ。おそらく過去の小惑星との衝突のせいだね。',
    '火星では、太陽は地球上で見るのと半分ぐらいの大きさだよ。',
    '地球は神にちなんで命名されていない唯一の惑星だよ。',
    '木星はすべての惑星の中でもっとも1日が短いよ。',
    '天の川銀河は約50億年後にアンドロメダ銀河と衝突するよ。',
    '太陽だけで太陽系の質量の99.86%を占めてるんだよ。',
    '太陽はほぼ完璧な球体だよ。',
    '皆既日食は1〜2年に一度発生するよ。これはとても珍しい事象だよ。',
    '土星は、太陽から受けるより2.5倍のエネルギーを宇宙空間に放射してるんだよ。',
    '太陽の内部温度は摂氏1500万度に達することがあるよ。',
    '月は我々の惑星から毎年約3.8cm離れていくよ。',
];

const handlers = {
    'LaunchRequest': function () {
        this.emit('GetNewFactIntent');
    },
    'GetNewFactIntent': function () {
        const factArr = data;
        const factIndex = Math.floor(Math.random() * factArr.length);
        const randomFact = factArr[factIndex];
        const speechOutput = GREETING_MESSAGE + randomFact;

        this.response.cardRenderer(SKILL_NAME, randomFact);
        this.response.speak(speechOutput);
        this.emit(':responseReady');
    },
    'AMAZON.HelpIntent': function () {
        const speechOutput = HELP_MESSAGE;
        const reprompt = HELP_REPROMPT;

        this.response.speak(speechOutput).listen(reprompt);
        this.emit(':responseReady');
    },
    'AMAZON.CancelIntent': function () {
        this.response.speak(STOP_MESSAGE);
        this.emit(':responseReady');
    },
    'AMAZON.StopIntent': function () {
        this.response.speak(STOP_MESSAGE);
        this.emit(':responseReady');
    },
};

exports.handler = function (event, context, callback) {
    const alexa = Alexa.handler(event, context, callback);
    alexa.APP_ID = APP_ID;
    alexa.registerHandlers(handlers);
    alexa.execute();
};

ほとんどテンプレートのまま。豆知識を翻訳しただけです。handlers の LaunchRequest プロパティが Amazon Echo からのエントリーポイントになります。GetNewFactIntent プロパティの function を呼び出して、応答を生成し Alexa に返しています。

Alexa Developer Console のテスト画面で Alexa にスキルを呼び出してもらうことができます。PC のマイクを有効にすれば、自分の声で話しかけることもできますし、チャットの UI にテキストを打ち込んで送信することも可能です。

「アレクサ 惑星くんを開いて」と送信したところ無事に惑星くんのスキルを開いて応答を返してくれました。

f:id:kondoumh:20180406155413p:plain

スキルI/O (Alexa へのリクエストとレスポンス) の JSON も確認できます。

ここまでくれば、開発者アカウントに紐付いた Amazon Echo の実機で作成したスキルを試せます。あっさり Echo Dot から惑星くんが起動できたのでちょっと驚きました*2

最初は権限周りでちょっと戸惑いましたが、これでスキル開発に取りかかれそうです。それにしてもサーバーレスな AWS Lambda は Alexa のスキル実行基盤として最適ですね。

*1:IAM ユーザとルートアカウントは同時ログインできないため

*2:他の人に使ってもらうには ベータテストの設定が必要のようです。

Visual Studio で C# の REPL - C# Interactive - を使う

Java 10 の JShell 使ってて Java が可愛く思えてきたので、C# にも REPL ないのかなーと見てみたら CSI というのがありました。

C# Interactive Walkthrough · dotnet/roslyn Wiki · GitHub

C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\Roslyn\csi.exe が本体のようです。Visual Studio 2015 から追加されたようです。知りませんでした。

開発者コマンドプロンプトから csi と叩けば使えますが、コマンドプロンプトで C# のコード書くのはちょっときびしいので Visual Studio で

表示 -> その他のウィンドウ -> C# インタラクティブ

でリッチなシェルが起動します*1。プロジェクトを開いてない状態でも使えます。

f:id:kondoumh:20180402173118p:plain

IntelliSense も効きますしコードが正しく評価されると整形もしてくれます。裏で JIT でコンパイルしてるっぽく、ちょっともっさり感ありますが、なかなか素敵なツールです。

f:id:kondoumh:20180402173137p:plain

このように LINQ の式を試す時など特に便利そうです。昔から LINQPad というツールがあって、LINQ to Entitis の Playground として使えますが、CSI は Visual Studio に付属しているので気軽に使えますし LINQ 以外の機能も試せます。

macOS や Linux でも使える .NET Core の環境にはまだ、CSI がポーティングされていないようで GitHub に Issue がありました。

github.com

IntelliSense 付きの CSI シェルが VS Code の統合ターミナルで動くといいですね。Language Server Protocol で拡張機能を作る感じかな。

サーバー プロトコルの言語拡張機能を追加する | Microsoft Docs

*1:F# Interactive というのもありますね。

IntelliJ IDEA で Java 10 のローカル変数型推論を有効化する

Java 10 がリリースされ、ローカル変数型推論が使えるようになったということで、環境構築してみました。 業務アプリではクラス名が長くなりがちなので、変数の初期化で右辺から型が明確な場合は積極的に使うとコードが簡潔になる効果があります。

JDK は以下のページからダウンロードできます。

Java SE - Downloads | Oracle Technology Network | Oracle

REPL である JShell が標準装備されました。IDE を開かなくても 手軽に API を試せたりするのがいいですね。

f:id:kondoumh:20180329233627p:plain

ローカル変数型推論ちゃんと使えました。JShell では単一ステートメントのセミコロンは省略できますし Java なのに可愛く思えるから不思議です。

IntelliJ IDEA も 2018年最初のメジャーアップデート 2018.1 がリリースされたので、早速更新。

f:id:kondoumh:20180329235350p:plain

File -> Project Structure の Platform Settings -> SDKs で JDK を指定します。macOS の場合は /Library/Java/JavaVirtualMachines/jdk-10.jdk/Contents/Home/ を指定します。

f:id:kondoumh:20180329235715p:plain

Project Settings -> Project の Project SDK: で登録した 10 (java version "10") を選択、Project language level: で 10 - Local variable type inference を選択します。

f:id:kondoumh:20180330000202p:plain

これで、ローカル変数で var を使ったコードがコンパイルできるようになります。

f:id:kondoumh:20180330000321p:plain

(追記)

IntelliJ IDEA 上でも、JShell を使えます。

Tools -> JShell Console...

で起動します。jshell_console_1.snippet にコード片を入力し、⌘ + Return で JShell shell_console_1 に実行結果が出力されます。スニペットウィンドウ上での選択範囲だけを実行させることもできます。

f:id:kondoumh:20180403063009p:plain

コードアシスト機能も発動しますし、JRE で JDK 10 を選択していれば、ローカル変数型推論も有効になります*1

(追記終わり)

Java 界隈も半年ごとのメジャーリリースへとリリースサイクルが変わったり、Java EE が Jakarta EE になったりと色々動き出てきました。プロダクション投入の本命は LTS が適用される Java 11 になると思われます。

Oracle Java SE サポート・ロードマップ

Java 1.2 ぐらいから業務で使ってるけど、もう20年経つんですね。。

*1:スニペットウィンドウではなぜかエラーっぽい表示ですが

Amazon Echo Dot を購入

各社のスマートスピーカーが出揃ってそろそろ Google Home か Amazon Echo 買ってもいいかなと思ってました。Nexus 6P の Google Assistant にもハンズフリーでアンロックして天気を教えてもらったりしていますが、Voice UI 専用機があってもよいかなと。

去年まで Google Play Music 使ってて、今年から Prime 会員なら少し安くなる Amazon Music Unlimited にスイッチしたこともあり Amazon Echo に決定。購入招待申し込みして3日ほどで招待メールが。コンパクトな Echo Dot を注文。翌日来たので招待申し込んでから4日ぐらいで届いたことに。スマホの Alexa アプリで設定自体はすぐに完了(WiFi の設定方法が若干分かりづらかった)。

f:id:kondoumh:20180317172259j:plain

Amazon Music 端末としては非常に快適です。Radiko 端末としてもいい感じ。それぞれ専用端末と言っても差し支えないレベル。

目覚まし時計としては、寝る前にタイマーを設定するだけで午前・午後まで指定しなければいけないというシンプルさですが便利に使ってます。これまでは iPad の Siri に起こしてもらっていましたが、寝室にデバイスを持ち込まないといけないのが若干面倒でした。

いくつかサードパーティのスキルも有効化してみましたが、まだ常用してるものはありません。

やはり Alexa には偏在しててほしいです。

これができると Podcast の消化が捗る気がするのですが(寝落ちするだけか)。

ホームページを HTTPS 化

最近、Chrome や Firefox を使っているとアドレスバーの左に HTTPS 対応情報が目立つようになってきており、HTTPS 化への圧を感じます。そして、Chrome 68 からは、全ての 非 HTTPS ページに「保護されていない通信 (Not secure) 」 という警告が出るようになるそうです (現バージョン 64 でもフォーム入力画面では出ます)。

security.googleblog.com

kondoumh.com のホームページを設置しているさくらインターネットでは去年から Let's Encrypt による無料 SSL サーバー証明書が使えるようにしてくれています。

対応しなきゃと思ってましたが、年を越してはや2月下旬。ようやく本日作業しました。証明書の発行自体はさくらインターネットのコントロールパネルからポチっとやるだけ。証明書の更新もサービス側にお任せできます。http -> https のリダイレクト設定は .htaccess ファイルを手編集。後はページ内の HTTP リンク (主に YouTube や Amazon ウィジェット) を地道にHTTPS リンクに差し替えて*1完了。

kondoumh.com

ついでに独自ドメインで運用している Tumblr も HTTPS 設定しました。

reblog.kondoumh.com

はてなブログはサービス側の HTTPS 対応が完了して独自ドメインでの対応方法が分かってから考えたいと思います。

*1:画像 の URL が HTTPS になっていると Chrome の DevTools で Mixed content の警告が出ます。

iEdit 2.30 リリース

f:id:kondoumh:20160410114137p:plain

約3年!!放置しておりました。ご無沙汰してました。

今回、機能追加やバグ修正はありません。

HiDPI 環境対応

最近 HiDPI をサポートした PC やタブレットが増えて、MacBook の Retina ディスプレイさながらテキストやアイコンなどを高い画素密度で美しく表示できる環境が普及しています。残念ながら iEdit を HiDPI 環境で動かすと、ツールバーのボタンや各ビューのスケールが縮小されてとても使えない状態になってしまいます。

f:id:kondoumh:20180212120614p:plain

本格的に対応するとなると、ウィンドウ生成周りや描画周り (特にダイアグラム部分) のレガシーなコードを書き直す必要がありますが、全く気乗りしない作業です。それで放置期間が長引いてしまいました。

今回、HiDPI を無視するビルドオプションの存在を知ったのがリリースのきっかけでした。このオプションでビルドしたバイナリを実行すると OS は「こいつ HiDPI って知らずに起動してるじゃん」と気付いて、どんな高精細のディスプレイ上でも、昔ながらの SVGA 的なサイズ感 *1 に調整してくれます。HiDPI じゃない環境では従来通り起動されます。実は起動用アイコンのプロパティで互換性の設定をすれば同じようなことができるのですが、利用者の手間が増えてしまうのと、必ずしも有効になるわけではなかったので、ビルドオプションで対応することにしました*2

f:id:kondoumh:20180212120653p:plain

ツールバーは16色のまま、ダイヤグラムは GPU によるレンダリングにも対応しないため*3、古臭い感が抜けませんが、まあベースが古いので・・。しかし、Microsoft はレガシー Win32 アプリの面倒をよく見てくれて助かります*4

Windows 10 サポート

前回リリース時はまだ Windows 8 時代で Windows 10 は Insider Preview でしたが、今や Windows 7 に拮抗するシェアを獲得しています。私も会社のラップトップが Windows 7 ですが Windows 10 オンリーになる日もそう遠くなさそうです*5。今回は Windows 7 でも動作確認してるので、おそらく 8 / 8.1 でも動作するのではないかと思います 。

Windows 10 サポートでやったことは最新の Visual C++ 2017 (内部バージョン 14.1) と Windows SDK (10.0.14393.0) でビルドしたこと、バージョン判定ロジックを修正したことぐらいです。Visual Studio 2017 でインストーラもガラリと変ってしまい、環境構築やプロジェクトの移行方法がよく分からなかったことも放置期間が長引いた原因になりました。

今後

ということで、ビルドし直しただけに近いリリースですが、マイナーバージョンを1つ上げました。 今後どの程度更新するか謎ですが、

  • コードベースの大幅変更を予定しない
  • 開発環境を常に最新版に更新して保守用環境 = 日常使いの環境にしておく

という状態になったので気楽に更新できる気がしています。

*1:96DPI のディスプレイに表示した感じです。

*2:開発機が MacBook なので VMware Fusion 上の 仮想マシン (Windows 10 Fall Creators Update) で HiDPI を有効にして確認していますが、このバージョンではスケーリングの描画がかなり改善されたみたいなので、初期バージョンの Windows 10 では表示のされ方が異なるかもしれません。

*3:GPU を活かすべく Direct 2D も試してましたがそのコードも revert しました。

*4:なんとストアに出すためのオプションまであります。Windows は元来下位互換性を重視するプラットフォームですけどね。ディベロッパーが UWP アプリをガンガン開発してくれないからかもしれませんが。

*5:Update による違いがどのぐらい顕著になっていくのかは今のところ謎です。Windows 10 も古いビルドはサポート終了になっていたりします。