あ、それもう20年ぐらい使ってるわ。ことのないこの一行のために費やした時間は数日(のちょっとした時間)。GitHubということで、二枚目をウインドウを起動できるようになりました。npx-multi-windowが使えそうです。diaryということで、組み込みました。GitHub普通にメッセージのやり取りができるようになったので、引き続き、メッセージにコマンドを仕込んで、時計のセットをできるようにして、アプリ完成です。用にパッケージしたものをこちらにおいておきます。許可をしてあげる必要があります。https://www.tiimer.net/tiimer-darwin-x64/tiimer.app.zipWindows用も動作したのですが、うまく配布用のZipが作れていないので、また調べまーす。DevLOVEXさんでお話しました先週、はこだて未来大学の大場みち子先生に呼んでいただきまして、学生さん向けにアジャイル開発のお話をしてきました。してそういうものが生まれたのか、というところを私なりに整理してみたものです。「アジャイル開発の時代」という大仰なタイトルになっており、恐縮です。釣りバカ日誌の話をしたかっただけです。Xさんに呼んでいただきまして、モブプロのお話をしました。さんのモブプロの報告になってます。speakerdeck.com学んだことの詳しい内容は、以下の記事ですでに書いていますので、よかったらどうぞ。kawaguti.hateblo.jpkawaguti.hateblo.jp並行セッションの裏番組の登壇者の皆さんが豪華すぎて、全部聞きに行きたい感じでした。そんな中で選んで聞いていただいた方に大感謝です。同窓会のようなカンファレンスに呼んでいただき、ありがとうございました。今日は二日目、盛会をお祈りしております。Angular前回のカウントダウンタイマーに関して、早速ネットで繋がってないときにも使いたいという要望をいただいたので、Electronを試してみようと思いました。....の、作業ログです。Webを単体アプリにパッケージするElectronElectronというのは、ChromeやSaferiなどのブラウザのコアになっているChroniumを使って、Webフロントエンドの技術でスタンドアローンのアプリを作れるというものです。必要なソースを全部固めてexeとか実行ファイルにするツール群とデバッグ環境、という感じかなと思います。人気のあるクロスプラットフォームエディタのAtomとかVSCodeがElectronで作られているそうなので、信頼性もありそう。Electron2000年代前半くらいにあったWindowsのhtaという仕組みがあるのですが、それに近い感じもします。AngularやReactなどのWebフロントエンドのツールがそのまま使えるというのが面白いところかなと思います。ほうが簡単なんじゃないかと思うのですが、クロスプラットフォームで動くものを作れる(ChroniumとかJavaScriptのおかげ)ので、そういうときには便利なのではないかという感じがします。その分複雑度は上がってしまうので、ハマった時に抜け出すにはそれなりに熟練が必要そうな気がします。カウントダウンタイマーが動くところまでやりました。マルチウインドウでの同期は少しハードルが高いかもしれないので、まずはありがたいサンプルの組み合わせで、できそうなところまで。組み込んでしまったので、その前まで戻します。別のフォルダを切って一からやることにしました。ElectronでAngular初期画面まで結構ここで時間を消費して調べることになってしまったのですが、AngularもElectronも変化が速くて、しかも別の組み合わせもあるので(React+Electronとか)、ハマった時に情報を調べるのがなかなかしんどかったです。Electronというキーワードで見つけたこちらがドンピシャでした。qiita.comということで淡々と作っていきました。ngx-build-plus@latesthttps://github.com/kawaguti/tiimer/commit/fa170f51078e35a0ea80f51516cffc5e060ec902プロジェクトを作ったら、上記のサイト通りに修正を入れました。https://github.com/kawaguti/tiimer/commit/122398d0a3b38053134dd5c785fd682ec83ce5ba実はこの時、ちょっとした失敗をしました。項の追記を忘れて、ビルドエラーはないのに起動しないという状況になりまして。手がかりが見つからずに数時間迷子になりました。簡単なサンプルが動かないと、疑うところが無限にあってしんどいですね。ミスなのでだいたい情報もなくて。"main.js",別の環境でもう一回作ったらけろりと出なくなって、気がついた次第。初期画面がElectron上で表示できたときには感動しました(自作自演)。リアルタイム時刻表示は動くか?次は時刻表示です。上記のサンプルがちゃんと動いたので、なんとなくシングルウィンドウものは動きそうな感じがしますが、一歩一歩確認します。ありがたいこちらのブログを見ながら、コードに時刻表示を入れていきました。GitHubElectronでも時刻が表示されました。動くので、ブラウザでも動きます。WindowsでもMacでも配布用のビルド(packager)できました。カウントダウンタイマーにする時刻表示までいければ、あとはカウントダウンタイマーをちょっと作り込むだけです。GitHubAngularのロゴを消すなどして、カウントダウンタイマーになりました。Beep音の実装あ、beepもありました。Qiita音もちゃんと出るようです。GitHubBeep音がオフィスで鳴り響いてドキッとしたので、BeepOffボタンも追加しました。押さなくても10回で勝手に止まるようにしてます。カウントダウンタイマーが動きました。デバッグ版なので、本番用のpackage作成は次回。あとマルチウインドウもやりたいですね。AngularAngularチュートリアルを一通りこなしました。HTTPの章がボリューミーでしんどかったですが勉強になりました。angular.jpインメモリで仮設のAPIを作って試せるところがなかなかいいですね。なにか作ってみようと思って、デュアルモニターに対応するカウントダウンタイマーを作ってみました。よかったら使ってみてください。http://tiimer.net/使い方はシンプルです。ボタンで別ウインドウ(タブ)を作って、それをデュアルディスプレイ側に持っていきます。そのあとでどちらかのウインドウで分秒を入力して”Set”をクリックするとタイマーが両側のウインドウでスタートします。00:00になるとアラームが鳴ります。音を止めるには”BeepOff”をクリックしてください。起動時やウインドウオープン時のソースの読み込み以外はサーバとの通信はありません。ソースコードはこちらです。GitHub作った過程を以下に記録しておきます。研修でよくカウントダウンタイマーを使うのですが、よく使っていたアプリケーションがOSアップデートの波についていけず、次々と使えなくなるという問題がありました。いろんな人が軽い気持ちでつくてみることができるような性質のアプリですので、マーケットにも常に似たようなアプリが存在していて、次のものを見つければいいのですが、ちょっとめんどくさいんですよね。今回は一つ加えたい要件もあったので、自作してみることにしました。その要件とはデュアルモニターでプレゼンしているときに、発表者ディスプレイ側で操作して、受講者向けディスプレイに時間を出したい!です。これを実現する方法は数限りなくあると思いますが、今回はAngularの練習ということもあるので、こういうソリューションを目指しました。新しいウインドウを起動して、子ウィンドウ側にタイマーを表示する結果的にはもう少し踏み込んだ、複数ウインドウを同期するカウントダウンタイマーになりました。いう仕組みをつかうと簡単にできそうです。....と思って探したら素晴らしいサンプルがありました。使い方を端的に示すだけではなく、html側のパイプの使い方も教えてくれているところです。「もっとシンプルな方法や、間違いの指摘等あればコメントよろしくお願いします。」ということですが、全く思いつきませんでした。ありがとうございます。現在時刻が更新できたら、次はカウントダウンタイマーです。いう変数に持ち、これを秒ごとに減算して、ゼロになったら完了、ということにしてみます。現在の残り秒数、elapsedSecが現在の経過秒数です。1000));});残り秒数表示が秒だと分単位がわかりにくいので、表示用にremainedStringというのを作っています。形式で残り秒数を表示します。なったらビープ音を鳴らす条件式が最後に入っています。ビープ音については次項で説明します。ビープ音を鳴らしたいです。いくつも思いつくのですが、できる限り簡単で、ネットワークに依存しない実装が欲しかったので、こちらを参考にさせていただきました。qiita.com音声データもそのまま頂いてしまいました。いう変数を持っておいて、カウントダウン開始時にこれをTrueにします。カウントがゼロになったときに、このフラグがTrueだったら、このbeepメソッドを呼んでビープを鳴らします。ユーザーが止めない限り毎秒鳴らしておきます。して次のイベントからはbeepが呼ばれないようになります。普通のHTMLでは、window.openというメソッドで新しいウインドウを開くことができます。このときの戻り値がウインドウオブジェクトというもので、これを経由して小ウインドウのオブジェクトにアクセスすることができます...のですが、ちょっとめんどくさいので、ライブラリを探しました。nolanus.github.ioメッセージのキューを実装していて、ウインドウ間でメッセージをやりとりできます。メッセージを受け取ることができるところが素敵でした。サンプルがよくてきていて、初心者の私でもわかりやすく、とてもありがたかったです。それを目標の秒数としてセットしてカウントダウンを開始せよ、という司令ということにします。あと、ビープ音が鳴っているときに消す命令として「beefOff」を設定しました。この文字列が来たらビープ音をOffにします。value.data);});ウインドウIDごとに出し先を変えられるのですが、それは不要なので、基本ブロードキャストします。ブロードキャストといっても、ウインドウのリストにforEachで全部メッセージを投げるだけの実装にしました。ビープ音がウインドウごとに鳴ってしまう要素技術を合わせるときに困ったところは、ビープ音がウインドウごとに鳴ってしまうことでした。いうことで解決しました。ブロードキャストするようにしています。いうCSS要素を使いました。そのうちCSSファイルに動かしたい。本番用にビルドしてデプロイしました。[rendered]Azureへの静的ファイルのデプロイは前回の記事の手順で行っています。作ってみたいと思います。あ、二番目は内部ロジックの変更(命令を残り秒数ではなく、目標時間にする)で対応できそうですね。蛇足ですが、こういう要望が見つかるところが、「動くソフトウェア」の大事なところだな、と思いました。非日本語ネイティブ向けのGlobalチケットを発売することにしました。