ほんじゃらねっと

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

Vue.js + SVG でブロック崩しゲーム(自動版)を作る

数当てゲーム、マインスイーパーに続き、Vue.jsでこども向けゲームを作る。

もう少し動きのあるゲームが作ってみたいので、

今回はボールが跳ね回るブロック崩しゲームに挑戦する。

これまでに作ったゲームは初期処理で何か答えを生成しておいて、

あとはユーザーのイベントに応じて処理を実行するだけだったのだけど、

ブロック崩しの場合はゲームがスタートしたら終始ボールが

動いている必要があるので、この仕組みから考えてみよう。

続きを読む

node.jsでWebスクレイピングして取得データを保存する

node.jsでデータ収集のためのWebスクレイピングを行う。

Webスクレイピングの流れというのはだいたい決まっていて、

  1. WebページにアクセスしてHTMLを取得する
  2. 取得したHTMLの中から必要なデータを抽出する
  3. 抽出したデータを保存する

の3段階となる。

続きを読む

node.jsでリモートのLinux環境やデータベースの操作を自動化する

ぼくが仕事でLinuxサーバ環境に接続して行う操作というのはだいたい決まっていて、

  • コマンドでサーバの状態を確認
  • ログをファイル出力してダウンロード
  • サービスの設定変更と再起動
  • SSHトンネル経由でDBアクセス

のうちどれかを行うことが多い。

基本は手作業だったり、シェルスクリプトを作って

実行したりする形で対応できるものなのだけど、

結構めんどくさいので、

今回はnode.jsでどこまで自動化できるかを試してみたい。

続きを読む

Vue.js + SVG でヌメロン風数当てゲームをつくる

Vue.jsでこども用ゲーム作成シリーズ第3弾。

前回作ったマインスイーパーは、ゲームルール自体の中毒性のおかげか、

たまにプレイしてくれてるようで作った甲斐があった。

blog.honjala.net

飽きないうちに次のゲームを作成しておこう、ということで

今回は昔テレビで観たヌメロンというゲームを参考に、

数当てゲームを作ってみた。

Numer0n - Wikipedia

続きを読む

Vue.js + SVG でマインスイーパーもどきをつくる

前回作った数当てゲームがこどもに好評だったので、

blog.honjala.net

次はもう少し複雑なマインスイーパー作成に挑んでみた。

数当てゲームはシンプルすぎて2秒で飽きられたけど、

マインスイーパーならしばらく遊んでくれるにちがいない。

今回は前回使った Vue + Vuex + TypeScript に加えて、

今後より高度なゲームを作るにあたって役に立つであろう、

SVGを使って画面を作成してみた。

続きを読む

数当てゲームを作る(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

続きを読む