ほんじゃらねっと

ダイエット中プログラマのブログ

数当てゲームを作る(Vue.js + Vuex + TypeScriptに挑戦)

料理人の子がパパにおいしい料理を作ってもらえるように、

うちの子も何がしかプログラマの子としてのメリットを受けて然るべきではないか、

と急に思い立ち、子供用のゲームを色々作ってあげよう!

と燃えてきたので、すぐ作れそうな「数当てゲーム」を作ってみた。

せっかくなので、興味があったけど試してなかったVue.jsも試してみた。

続きを読む

デザイナーとプログラマのわがままに応えて、テンプレートエンジンから生成されたHTMLファイルを元の部品ファイルに分割するツールを作る

f:id:piro_suke:20170529005556j:plain

Webアプリを開発する際、

最近の多くのテンプレートエンジンはHTMLをレイアウトや部品に分割して作成し、

それをextendしたりincludeしたりして1つのHTMLとして出力できるようになっている。

部品化することで、ヘッダーとかメニューとかフッターとか、

複数のページで共通して表示する要素を変更する際に、

1箇所だけ変更すれば済むようになるわけだ。

しかし部品化することで発生するデメリットもあって、

Webアプリとして実行してみないと完成版のHTMLが確認できない、

外部のデザイナーさんとデザインをやりとりしづらい、

といった問題が発生する。

続きを読む

Web Speech Synthesis APIを使って、正月のかるた読み上げ無間地獄タスクを自動化する

f:id:piro_suke:20170104012805j:plain

正月休み、帰省した実家で娘たちがかるた遊びにハマり、

ほぼ毎日祖母やいとこと遊んでいた。

楽しそうだし、瞬発力やら記憶力やらが鍛えられそうで大変良い。

大変良いのだけど、

かるた遊びの困ったところは、プレイヤー以外に読み手が必要だというところで、

その際はだいたい近くでダラダラしている人間(私)が呼ばれて参加させられる。

最初はこちらも娘達に相手をしてもらえるのが嬉しいので喜んで参加するのだけど、

毎回同じ内容を読み上げるので、何回かやっているとげんなりしてくる。

しかしダラダラしている手前、断るのも難しい。

そこで、「繰り返し作業は自動化や!」と

「テキスト読み上げ」でググったら出てきたWeb Speech Synthesis API を使って、

かるた自動読み上げツールを作ってみた。

続きを読む

Node.jsで非同期処理を不特定回数繰り返す方法をYouTubeのお気に入りタイトル一覧を取得するスクリプトを作りながら考える

f:id:piro_suke:20161212004436j:plain

YouTubeでお気に入りに入れた動画のタイトルを一覧化して見たくなったので、

YouTube Data API経由でデータを取得して表示するNode.jsスクリプトを作ってみた。

APIへのアクセス自体はサクッとできたのだけど、

複数ページデータを非同期で取得するフローのコントロールで苦労した。

Node.jsスクリプトを書く時は毎回このフローコントロールでつまづくのだけど、

慣れの問題なのだろうか。

今回はcaolan/asyncライブラリのおかげで何とか解決できた感じ。

async - Documentation

作成したスクリプトの内容を紹介しつつ、

非同期処理を不特定回数実行する際のパターンについて考えてみよう。

続きを読む

jQueryUIのsortableウィジェットを使ってアイテムの並び順を管理するUIを作成する方法

f:id:piro_suke:20161207003918j:plain

例えば商品のランキングを手動で管理する場合、

商品データに並び順のようなものをつけてその順序で表示すると思うのだけど、

並び順を設定するUIをどのように作るのが良いか。

近いうちに作る機会がありそうなので、考えてみる。

ReactやVue.jsを使う機会はなさそうなので、jQueryベースで。

続きを読む

Node.jsがES5とES6(ES2015)に対応してることに今さら気づいて、使ってみたら感動した新要素

Pythonを堪能したのでJavascriptに戻ってきた。

JavascriptでPythonのジェネレータみたいな機能はないのかな、

と調べてみると、ES6(ES2015)で追加され、Node.jsはES6対応済みらしい。

そういえばES5もES6もよく調べたことないな、と思って

調べてみると、便利機能が山ほど追加されててびっくり。

Javascript好き、と言いながら大分遅れたコードを書いてたようだ。

とりあえず今後絶対使おう!と決めた要素を練習がてらまとめておく!

続きを読む

Node.jsでメモリを使い切らずに大容量ファイルを読み込んでデータベースに登録する方法

サーバが重いけどどこを直せばよいか分からないから調査してくれー、と

Tomcatのでかいアクセスログファイルを渡されたので、

とりあえずデータベースに入れて調査してみるべ、と

ログファイルの内容ををデータベースに取り込むスクリプトを書いてみた。

Node.jsのStreamを全然理解してなかったので、よい勉強になった。

続きを読む

便利なリスト・マップ操作関数を提供してくれるUnderscore.js を使ってJavascriptで文字別出現回数を数えるスクリプトを作成する

Javascriptライブラリの中でも、

Underscore.jsが大変気に入っている。

Underscore.js

each、filter、map、reduce等

リスト操作、マップ操作関連の関数が

100以上含まれたユーティリティライブラリで、

他の言語にあってJavascriptにもあったらいいのにな、

と思うようなものをいい具合に用意してくれている。

作業効率化のための一括処理には欠かせないライブラリだ。

今回はUnderscore.jsに含まれるcountBy関数を使って

文字別出現回数取得関数を作ってみる。

続きを読む

Node.jsでWebサイトの更新チェックを自動化する

f:id:piro_suke:20160501015354j:plain

特定のWebサイトを定期的にチェックして特定のキーワードが含まれていたら

通知してくれる仕組みを1つ覚えておくと色々重宝する。

例えば

会社に社員用Webサイトがあるなら、

(そしてそのサイトがRSSもメール通知も提供してないなら)

そこに「重要」とか「人事」とかのキーワードを含む記事が投稿された時に

通知を受け取れるようにしておけば、

いちいちサイトをチェックしにいかなくても

逃さず確認できる。

また、Webスクレイピングする方法を覚えておけば、

通知を受け取る以外にも、

画面キャプチャの撮影や画像やテキストの収集を

自動化したり、作成したWebシステムの画面テストを行う、

等の応用もしやすくなる。

今回は Node.js + Grunt + cheerio-httpcli を使用して

手軽にWebサイトのデータをチェックする方法を紹介する。

続きを読む

WindowsのタスクスケジューラからGruntスクリプトを起動する方法

f:id:piro_suke:20160422003356j:plain

どうせ自動化するなら完全自動化したいよね、

ということで今回は作成したGruntスクリプトを

Windowsの起動時や毎日の決まった時間に実行できるように

タスクスケジューラに登録する方法を紹介する。

この記事はGruntを実行する環境が整っていることを前提としているので、

未インストールの方は下記の記事を参考にしていただきたい:

blog.honjala.net

続きを読む

Node.jsとGruntでフォルダ監視ツールを作る

f:id:piro_suke:20160414001322j:plain

コミュニケーションというのはなかなか難しいもので、

「急いで確認したいから資料ができたら共有フォルダに入れて、すぐ連絡してよ」

と強めに伝えても、

資料はとっくにできてるのに

やれ後で連絡するつもりだっただの、

もうちょっと確認してから連絡するつもりだっただの、

今メール書いてただので、

一本内線をくれるだけで良いのになかなか連絡がもらえないことがある。

そんなストレスフルな行き違いは

「このやろう!」と毎回怒りを爆発させるよりも

ツールを使って解決の仕組みを用意してしまうに限る。

ということで今回は指定したフォルダを監視して、

ファイルが追加されたり更新されたりしたら

自動で通知してくれるスクリプトをつくってみたい。

続きを読む

正規表現を使ったエレガントな置換処理を学びつつ簡易なファイル名一括変換ツールを作る

文字列を検索したりマッチしたものを置換したり、という作業は

技術者が制作・開発する時だけでなく、例えばExcelやWordで文書を編集する際や

Webページ内で目的の文章を探したりする場合にも行うもので、

「作業の効率化」という点では欠かせないものだ。

今回扱う「正規表現」を使った検索・置換については、

標準の機能として備えているツールやテキストエディタも多いが、

プログラマ以外には馴染みの薄いものかもしれない。

(少なくとも私に面倒な変換作業を依頼してくる人たちは間違いなく知らないと思う)

「正規表現」を全く知らない人は、

このつまらなそうな言葉を見ただけでスルーしてしまいそうだが、

使いこなせば大変強力なものであり

プログラマ以外の

パソコンを使用して何かしらの仕事をしている人にとっても

作業効率が劇的に上がること間違いなしの技術なので、

ここで紹介しておきたい。

続きを読む

プログラミングはしたくないけど自動化はしたい人のための、Grunt.jsによる作業自動化入門

前回書いたNode.js入門記事の続き。

blog.honjala.net

前回から引き続き、

いかにプログラムの勉強無しで自動化できることを増やすか、

もとい、

いかに他部署のノンプログラマに自動化ツールを使わせて自分への作業依頼を減らすか、

をマイテーマに少しずつ情報をまとめていく。

Node.jsを紹介しただけでは、「Javascript…難しそう。いつかやるわ。」

となりそうなので、

今回はプログラミング要素最小限で使えるGruntを紹介する!

続きを読む

作業自動化のための Node.js 入門

これまでいくつかの記事でNode.jsを使ったスクリプトを載せてきたが、

自動化のためのスクリプトを書いて動かす環境として

Node.jsは手軽だし速いし色々ライブラリは揃ってきているし

なかなか良い環境だと感じている。

Web系の仕事をしていればJavascriptはある程度親しみのある言語だろうし、

GruntやGulpのようなWeb関連作業を自動化する

機能満載のタスクランナーまで用意されている。

実行環境もインストーラをダウンロードしてインストールすれば

パッケージ管理ツール付きで入手することができるので、

すぐに開発を始めることができる。

非同期処理が得意なサーバアプリケーションを作るための環境として

紹介されることが多いけど、この手軽に導入できて

Javascriptでサクッとアプリが作れるところだけでも十分に価値があると思う。

ノンプログラマが仕事を効率化するためにプログラミングを始めるなら、

とりあえずNode.jsから始めてみたらいいんじゃないだろうか。

今回はこのブログで紹介しているNode.jsのサンプルを試していただけるよう、

Node.js実行環境のインストールから

簡単なサンプルプログラムを作って実行するところまでを紹介したい。

自分でプログラムを作成するところまでいかなくても、

入手したプログラムを実行できるようになれば自動化作業も捗るのではないかと思う。

続きを読む

IFTTTのMakerチャンネルを使って、いろんなサービスの更新情報を通知してくれる仕組みを作る

仕事でチーム間のコミュニケーションツールとして使い始めたチャットワークだが、

最近は「いろんなサービスやスクリプトからの通知を集めるツール」としての利用がメインになってきている。

www.chatwork.com

以前記事にした、

「Subversionのコミット情報にメンバーがすぐに気づけるように通知するスクリプト」

blog.honjala.net

を書いたのがきっかけで、

この仕組みを流用すればメールを汚さずにいろんな通知を一元管理できるのでは?

と思いついて色々チャットワークに自動通知するスクリプトを書き始めた。

ただ通知するだけなのだけど、ボットが

「ブログのはてブが増えたよ!」とか

「AmazonにKindle本が追加されたよ!」とか

発言してくれることでチェックの手間が減るのが楽しい。

本題

そんな時に、「IFTTTにMakerチャンネルができた」という話を聞いて、

これを使えば自動通知がさらに捗りそうだ、ということで試してみた、というのが今回の本題だ。

IFTTT(If This Then That)とは

EvernoteやTwitter等様々なアプリやWebサービス(チャンネルと呼ばれる)の更新を監視して、

更新が発生するとをあらかじめ登録しておいたアクションを実行してくれるというサービスで、

これを使えばプログラムを自作しなくても手軽に連携の仕組みが作れるという、

自動化心をくすぐられるサービスだ。

ifttt.com

IFTTTは便利なサービスなのだが、以前はチャンネルが用意されていないサービス間の連携がしにくい、という欠点があった。

チャットワークもチャンネルが用意されていない。

それが、Makerチャンネルが使えるようになったことで多少やりやすくなった。

ifttt.com

Makerチャンネルは簡単に言うと「他のチャンネルとWebアプリを連携できる」チャンネルだ。

自作のWebアプリをトリガーとしてMakerチャンネル経由で他のチャンネルを呼び出したり、

特定のチャンネルで更新が発生したら指定したURLにリクエストを飛ばすようなことができる。

これを使えば、何かしらのサービスで更新が発生した時に自作のWebアプリを経由してチャットワークにメッセージを保存する、みたいなこともできるわけだ。

Makerチャンネルを使ってチャットワークに連携するサンプルを作る

試しに、Node.jsで作成したWebアプリ経由で「Date&Timeチャンネルをトリガーに、定時になったらチャットワークに通知するレシピ」を作ってみた。

Webアプリを準備する

まずはIFTTTからアクセス可能なWebアプリを用意する。

ここがややハードルの高いところ。

今回は「http://自分のサーバのドメイン:3000/ifttt/notify_workend」というURLを用意し、

POSTリクエストで「time:時間」「message:メッセージテキスト」をJSON形式で渡すとその内容をチャットワークに送れるようにした。

下記はnode.js + Express4のサンプルソース:

(Webアプリでパラメータを受け取れたら環境は問わないので、Apache + PHP環境とかでも可)

REST API Sample For IFTTT Maker Channel.

こういうものを1つ用意しておけば、URLを追加していくだけでいろんなチャンネルと連携できるようになる。

IFTTTのレシピを作成する

次はITFFF側で用意したURLを呼び出すレシピを作成する。

トリガーとなるチャンネルの選択後、Makerをアクションとして選択して新しいレシピを作成する。

f:id:piro_suke:20160215013908p:plain

アクションの設定を行って、

f:id:piro_suke:20160215013918p:plain

作成したWebアプリのURLとパラメータを定義する。

「Content Type」を「application/json」にしておき、BodyでJSONを渡すようにしている。

f:id:piro_suke:20160215013928p:plain

この内容で登録しておくと、平日の17:30になったら、「Time to leave work」というメッセージが

用意したURLに飛び、そこを経由してチャットルームにメッセージが投稿される。

おわり

とりあえず仕組みが作ってみたが、まだまだ活用法は模索中。

また良い通知レシピを思いついたら試してみたい。

実践Node.jsプログラミング Programmer's SELECTION

実践Node.jsプログラミング Programmer's SELECTION