数当てゲーム、マインスイーパーに続き、Vue.jsでこども向けゲームを作る。
もう少し動きのあるゲームが作ってみたいので、
今回はボールが跳ね回るブロック崩しゲームに挑戦する。
これまでに作ったゲームは初期処理で何か答えを生成しておいて、
あとはユーザーのイベントに応じて処理を実行するだけだったのだけど、
ブロック崩しの場合はゲームがスタートしたら終始ボールが
動いている必要があるので、この仕組みから考えてみよう。
続きを読む数当てゲーム、マインスイーパーに続き、Vue.jsでこども向けゲームを作る。
もう少し動きのあるゲームが作ってみたいので、
今回はボールが跳ね回るブロック崩しゲームに挑戦する。
これまでに作ったゲームは初期処理で何か答えを生成しておいて、
あとはユーザーのイベントに応じて処理を実行するだけだったのだけど、
ブロック崩しの場合はゲームがスタートしたら終始ボールが
動いている必要があるので、この仕組みから考えてみよう。
続きを読むnode.jsでデータ収集のためのWebスクレイピングを行う。
Webスクレイピングの流れというのはだいたい決まっていて、
の3段階となる。
続きを読むぼくが仕事でLinuxサーバ環境に接続して行う操作というのはだいたい決まっていて、
のうちどれかを行うことが多い。
基本は手作業だったり、シェルスクリプトを作って
実行したりする形で対応できるものなのだけど、
結構めんどくさいので、
今回はnode.jsでどこまで自動化できるかを試してみたい。
続きを読むVue.jsでこども用ゲーム作成シリーズ第3弾。
前回作ったマインスイーパーは、ゲームルール自体の中毒性のおかげか、
たまにプレイしてくれてるようで作った甲斐があった。
飽きないうちに次のゲームを作成しておこう、ということで
今回は昔テレビで観たヌメロンというゲームを参考に、
数当てゲームを作ってみた。
続きを読む前回作った数当てゲームがこどもに好評だったので、
次はもう少し複雑なマインスイーパー作成に挑んでみた。
数当てゲームはシンプルすぎて2秒で飽きられたけど、
マインスイーパーならしばらく遊んでくれるにちがいない。
今回は前回使った Vue + Vuex + TypeScript に加えて、
今後より高度なゲームを作るにあたって役に立つであろう、
SVGを使って画面を作成してみた。
続きを読む料理人の子がパパにおいしい料理を作ってもらえるように、
うちの子も何がしかプログラマの子としてのメリットを受けて然るべきではないか、
と急に思い立ち、子供用のゲームを色々作ってあげよう!
と燃えてきたので、すぐ作れそうな「数当てゲーム」を作ってみた。
せっかくなので、興味があったけど試してなかったVue.jsも試してみた。
続きを読む
Webアプリを開発する際、
最近の多くのテンプレートエンジンはHTMLをレイアウトや部品に分割して作成し、
それをextendしたりincludeしたりして1つのHTMLとして出力できるようになっている。
部品化することで、ヘッダーとかメニューとかフッターとか、
複数のページで共通して表示する要素を変更する際に、
1箇所だけ変更すれば済むようになるわけだ。
しかし部品化することで発生するデメリットもあって、
Webアプリとして実行してみないと完成版のHTMLが確認できない、
外部のデザイナーさんとデザインをやりとりしづらい、
といった問題が発生する。
続きを読む
正月休み、帰省した実家で娘たちがかるた遊びにハマり、
ほぼ毎日祖母やいとこと遊んでいた。
楽しそうだし、瞬発力やら記憶力やらが鍛えられそうで大変良い。
大変良いのだけど、
かるた遊びの困ったところは、プレイヤー以外に読み手が必要だというところで、
その際はだいたい近くでダラダラしている人間(私)が呼ばれて参加させられる。
最初はこちらも娘達に相手をしてもらえるのが嬉しいので喜んで参加するのだけど、
毎回同じ内容を読み上げるので、何回かやっているとげんなりしてくる。
しかしダラダラしている手前、断るのも難しい。
そこで、「繰り返し作業は自動化や!」と
「テキスト読み上げ」でググったら出てきたWeb Speech Synthesis API を使って、
かるた自動読み上げツールを作ってみた。
続きを読む
YouTubeでお気に入りに入れた動画のタイトルを一覧化して見たくなったので、
YouTube Data API経由でデータを取得して表示するNode.jsスクリプトを作ってみた。
APIへのアクセス自体はサクッとできたのだけど、
複数ページデータを非同期で取得するフローのコントロールで苦労した。
Node.jsスクリプトを書く時は毎回このフローコントロールでつまづくのだけど、
慣れの問題なのだろうか。
今回はcaolan/asyncライブラリのおかげで何とか解決できた感じ。
作成したスクリプトの内容を紹介しつつ、
非同期処理を不特定回数実行する際のパターンについて考えてみよう。
続きを読む
例えば商品のランキングを手動で管理する場合、
商品データに並び順のようなものをつけてその順序で表示すると思うのだけど、
並び順を設定するUIをどのように作るのが良いか。
近いうちに作る機会がありそうなので、考えてみる。
ReactやVue.jsを使う機会はなさそうなので、jQueryベースで。
続きを読むPythonを堪能したのでJavascriptに戻ってきた。
JavascriptでPythonのジェネレータみたいな機能はないのかな、
と調べてみると、ES6(ES2015)で追加され、Node.jsはES6対応済みらしい。
そういえばES5もES6もよく調べたことないな、と思って
調べてみると、便利機能が山ほど追加されててびっくり。
Javascript好き、と言いながら大分遅れたコードを書いてたようだ。
とりあえず今後絶対使おう!と決めた要素を練習がてらまとめておく!
続きを読むサーバが重いけどどこを直せばよいか分からないから調査してくれー、と
Tomcatのでかいアクセスログファイルを渡されたので、
とりあえずデータベースに入れて調査してみるべ、と
ログファイルの内容ををデータベースに取り込むスクリプトを書いてみた。
Node.jsのStreamを全然理解してなかったので、よい勉強になった。
続きを読むJavascriptライブラリの中でも、
Underscore.jsが大変気に入っている。
each、filter、map、reduce等
リスト操作、マップ操作関連の関数が
100以上含まれたユーティリティライブラリで、
他の言語にあってJavascriptにもあったらいいのにな、
と思うようなものをいい具合に用意してくれている。
作業効率化のための一括処理には欠かせないライブラリだ。
今回はUnderscore.jsに含まれるcountBy関数を使って
文字別出現回数取得関数を作ってみる。
続きを読む
特定のWebサイトを定期的にチェックして特定のキーワードが含まれていたら
通知してくれる仕組みを1つ覚えておくと色々重宝する。
例えば
会社に社員用Webサイトがあるなら、
(そしてそのサイトがRSSもメール通知も提供してないなら)
そこに「重要」とか「人事」とかのキーワードを含む記事が投稿された時に
通知を受け取れるようにしておけば、
いちいちサイトをチェックしにいかなくても
逃さず確認できる。
また、Webスクレイピングする方法を覚えておけば、
通知を受け取る以外にも、
画面キャプチャの撮影や画像やテキストの収集を
自動化したり、作成したWebシステムの画面テストを行う、
等の応用もしやすくなる。
今回は Node.js + Grunt + cheerio-httpcli を使用して
手軽にWebサイトのデータをチェックする方法を紹介する。
続きを読む
どうせ自動化するなら完全自動化したいよね、
ということで今回は作成したGruntスクリプトを
Windowsの起動時や毎日の決まった時間に実行できるように
タスクスケジューラに登録する方法を紹介する。
この記事はGruntを実行する環境が整っていることを前提としているので、
未インストールの方は下記の記事を参考にしていただきたい:
続きを読む