はてなブックマーク

ブラウザで操作できるツールを作りたいけどWebのフロントエンド作るの面倒だな...とWeb系開発者にあるまじき事を考えつつ良いプラットフォームを探していたら、SlackのAPIが進化してツールフロントエンド化するのにうってつけの機能が増えているのを見つけました。 api.slack.com チャットツールのAPIといえば、「チャットで入力したテキストをボット側でがんばって解釈して実行する」というCUIのコマンド的な使い方しかできないイメージだったのですが、最近のSlackのAPIは「ショートカット(Shortcuts)」「モーダル(Modals)」「ブロックキット(Block Kit)」といった機能を使うことで、入力コンポーネントを使用したGUIでボットとやりとりすることができるようになっています。 これらを駆使すれば、入力フォームからデータを登録したり、編集フォームでデータを変更したり、

OpenCV、インストール難しすぎじゃね？ 前回の記事で blog.honjala.net Node.jsでOpenCVを使うことに成功したわけですが、 OpenCVはとにかくインストールでうまくいかないことが多くて、 Macでどうにかうまく動いてもLinuxにインストールしようとすると またエラーでつまづいたりして、うんざりしました。 ImageMagickなんて適当にyum installするだけでインストールできるのに！ 乗り換えたろか！と思いつつ、OpenCVはやっぱり使ってみたい。 ブラウザで動くらしいOpenCV.jsなら一度用意してしまえば 環境構築で二度と苦労しなくて済むのでは？ ということで今回はOpenCV.jsでの画像処理を試してみました。 docs.opencv.org OpenCV.jsを準備する OpenCV.jsはブラウザ上で動作するので、 Mac上だろうがW

画像処理で遊びたいな、と思い立ったので、 以前PythonとOpenCVで作成した画像線画化スクリプトを Node.jsで作成しなおしてみました。 blog.honjala.net OpenCVはPythonと使うのがやはり一番使いやすいのですが、 Javascript用APIも提供されているので、 Webページ上のJavascriptやNode.jsからでも利用することができます。 docs.opencv.org しかし試してみるとNode.jsから生でOpenCV.jsを使うのはcanvasを利用することを 前提にしていたりしてなかなか手強く、うまくいかなかったので、 「opencv4nodejs」というライブラリを使うことにしました。 www.npmjs.com こちらはOpenCVの関数をNode.jsからいい感じで使えるようにしてくれていて、 Pythonで書いた処理をNode.

子どもたちがマインクラフト(iOS版)にはまっており、一緒に遊んだりしている。 クリエイティブモードで一緒にわーわー言いながら街や建物を作るのはなかなか楽しい。 楽しいのだけど、 ちまちまブロックを置いていくのはそろそろ飽きてきたので、 ビャーっとブロックを配置したり、 建物を自動生成したり、 自動化してもっと面白いことができないものかと調べてみた。 調べたところ、 自動化できる仕組みがいくつか用意されていた。 functionコマンド 最初に見つけたのが、「function」コマンド。 これはファイルに書いたコマンドのリストを実行するもので、 まさに求めていたものだったのだけど、 残念ながらJava版のみでWindows版は非対応だった。 napoan.com iOS版の Pocket Edition (PE) と一緒に遊ぶには、 Windows版でないといけないらしい。 MakeCod

会社の自分のPC(Windows)で何かを定期的に実行したいときは だいたいPythonなりnode.jsなりでスクリプトを書いて タスクスケジューラに登録しておく。 のだけど、 タスクスケジューラは未ログイン時に実行しようとすると ログインアカウントを登録しておく必要があったり、 パスワードを変更した時に更新を忘れて実行に失敗しまくってたり、 そのログイン失敗のせいで社内ネットワークから閉め出されちゃったり、 色々と困ることがある。 Linuxのcrondと同じような仕組みができないか、と探してみたら 「pm2」と「node-cron」の組み合わせで実現できそうだったので、試してみた。 参考情報 こちらの参考ページを読んだらこのあとの内容は読まなくても良いくらいなのだけど、 node.jsで定期的にスクリプトを実行するにはpm2が便利 | 「node-cron」はその名の通りnode.j

数当てゲーム、マインスイーパーに続き、Vue.jsでこども向けゲームを作る。 もう少し動きのあるゲームが作ってみたいので、 今回はボールが跳ね回るブロック崩しゲームに挑戦する。 これまでに作ったゲームは初期処理で何か答えを生成しておいて、 あとはユーザーのイベントに応じて処理を実行するだけだったのだけど、 ブロック崩しの場合はゲームがスタートしたら終始ボールが 動いている必要があるので、この仕組みから考えてみよう。 完成イメージ 本当はユーザーが操作するバーを作って、 ちゃんとしたブロック崩しにしたかったのだけど、 ブロックを消せるようになった時点でちょっと飽きてしまったので、 ボールがブロックを消してくれるのをただ待つだけの 「自動」ブロック崩しになってしまった。 ちゃんとしたやつはまた気持ちが盛り上がってから作る。 ソースはこちら： github.com こちらで遊べます...というか

node.jsでデータ収集のためのWebスクレイピングを行う。 Webスクレイピングの流れというのはだいたい決まっていて、 WebページにアクセスしてHTMLを取得する 取得したHTMLの中から必要なデータを抽出する 抽出したデータを保存する の3段階となる。 通常、Webスクレイピングが必要となるのは データ取得用のAPIが提供されていない 必要なデータが1ページに収まらず多くのページにまたがっており、手作業でコピペしていくのが難しい 場合で、そのうちWebスクレイピングが可能なのは 対象の各ページが同じフォーマットになっており、パターン化された処理で必要なデータを取得できる 場合となる。 例えば「ページングされた検索結果画面」とか 「同じフォーマットでHTMLが書かれたたくさんの商品詳細画面」 なんかがスクレイピングでデータ取得しやすい。 前提として、 Webスクレイピングは手作業 で

ぼくが仕事でLinuxサーバ環境に接続して行う操作というのはだいたい決まっていて、 コマンドでサーバの状態を確認 ログをファイル出力してダウンロード サービスの設定変更と再起動 SSHトンネル経由でDBアクセス のうちどれかを行うことが多い。 基本は手作業だったり、シェルスクリプトを作って 実行したりする形で対応できるものなのだけど、 結構めんどくさいので、 今回はnode.jsでどこまで自動化できるかを試してみたい。 事前準備 ローカルのWindowsマシンでnode.jsプログラムを実行して、 プログラム経由でLinux環境に接続して色々操作することを 想定しているので、ローカルにnode.js環境をインストールしておく。 この記事に載せてるサンプルは Typescriptで書いているけど、だいたいJavascriptとしても動くと思う。 SSHでLinux環境に接続する まずはSSH

前回作った数当てゲームがこどもに好評だったので、 blog.honjala.net 次はもう少し複雑なマインスイーパー作成に挑んでみた。 数当てゲームはシンプルすぎて2秒で飽きられたけど、 マインスイーパーならしばらく遊んでくれるにちがいない。 今回は前回使った Vue + Vuex + TypeScript に加えて、 今後より高度なゲームを作るにあたって役に立つであろう、 SVGを使って画面を作成してみた。 マインスイーパーのルール 昔Windowsに付属してたマインスイーパーの簡易版のイメージ。 9 x 9 のマスを用意する そこにランダムに10個のマイン（子供に分かるよう、「落とし穴」にした）を埋め込む マスをクリックしてマインを引いたらゲームオーバー マイン以外のマスをクリックすると、そのマスのまわりにいくつマインがあるか数字で表示される まわりにマインがないマスをクリックすると

WindowsのGUIアプリとして作りたいものがいくつかあって、 PythonのGUIライブラリを いくつか（PyQtとかwxPythonとかKivyとか）試してみたけどしっくりこず、 やっぱりWindows用アプリを作るなら.NETじゃない？ ということでC#での開発について調べている。 今まで「Windows限定でVisualStudioがないと開発できないJavaみたいな言語」という、 汎用的じゃないイメージがあって避けていたのだけど、 調べてみると.NET CoreとかLinuxでも動作するCUIアプリを開発する仕組みもあって、 興味が湧いてきた。 新しい言語を学ぶならメイン言語にする価値があるものが良いので、 自分がプログラミング言語に求めることが一通りできるかどうか、調べてみた。 プログラミング言語に期待することは 個人的にプログラムを書く際によく利用している技術やライブラリを

小さい頃に気に入って遊んでたあのお絵かきおもちゃ、 なんだったかな、 と思って検索したら「Etch-A-Sketch」という製品だった。 Ohio Art Classic Etch A Sketch Magic Screen 出版社/メーカー: Ohio Artメディア: おもちゃ＆ホビーこの商品を含むブログを見る 懐かしい。 左右のダイアルをまわすと、上下左右にポインタが動いて線が描かれる。 くるくるダイアルを回してポインタを一生懸命動かして絵を描いていくわけだ。 両方のダイアルを同時に回すことで斜めの線を描いたりもできるのだけど、 それが結構難しくて、ふにゃふにゃした線になる。 絵を消したい時は、裏向けてシャカシャカ振ると消える。 最終的には直線を組み合わせた角ばった絵になっちゃうのだけど、 それがまた独特で楽しかった。 つくる なんてことを思い出したら猛烈に遊びたくなったので、 記憶

Web開発を仕事にしていると 「マニュアルやプレゼンに使うのでWebアプリのスクリーンショットをくれ」 と依頼されることがよくある。 ChromeのFireshotのようなブラウザの拡張機能を使ったりすれば 1画面ずつ撮っていけるのだけど、 chrome.google.com たくさんのページのスクリーンショットを、 変更がある度に撮り直すのは面倒なのでなんとか自動化したい。 「node-webshot」モジュールを使う 探してみると、 Node.jsの「node-webshot」パッケージを使えば 手軽にスクリーンショット撮影スクリプトが作れそうだ。 www.npmjs.com Node.jsでWebKitブラウザの機能を利用可能にするPhantomJSの スクリーンキャプチャ機能をラップしたものらしい。 PhantomJS | PhantomJS PhantomJSはブラウザで行ってい

正月休み、帰省した実家で娘たちがかるた遊びにハマり、 ほぼ毎日祖母やいとこと遊んでいた。 楽しそうだし、瞬発力やら記憶力やらが鍛えられそうで大変良い。 大変良いのだけど、 かるた遊びの困ったところは、プレイヤー以外に読み手が必要だというところで、 その際はだいたい近くでダラダラしている人間（私）が呼ばれて参加させられる。 最初はこちらも娘達に相手をしてもらえるのが嬉しいので喜んで参加するのだけど、 毎回同じ内容を読み上げるので、何回かやっているとげんなりしてくる。 しかしダラダラしている手前、断るのも難しい。 そこで、「繰り返し作業は自動化や！」と 「テキスト読み上げ」でググったら出てきたWeb Speech Synthesis API を使って、 かるた自動読み上げツールを作ってみた。 Web Speech API とは Web Speech API はブラウザで音声合成（音声読み上げ。

YouTubeでお気に入りに入れた動画のタイトルを一覧化して見たくなったので、 YouTube Data API経由でデータを取得して表示するNode.jsスクリプトを作ってみた。 APIへのアクセス自体はサクッとできたのだけど、 複数ページデータを非同期で取得するフローのコントロールで苦労した。 Node.jsスクリプトを書く時は毎回このフローコントロールでつまづくのだけど、 慣れの問題なのだろうか。 今回はcaolan/asyncライブラリのおかげで何とか解決できた感じ。 async - Documentation 作成したスクリプトの内容を紹介しつつ、 非同期処理を不特定回数実行する際のパターンについて考えてみよう。 YouTubeのAPIにアクセスする準備 今回のスクリプトはYouTubeのAPIを利用するため、 Googleのデベロッパーサイトでアプリケーション登録が必要となる。

昨日書いた下記記事の続き。 blog.honjala.net 全角半角大文字小文字ひらがなカタカナを区別せず高速検索できるようには なったのだけど、肝心のlike検索でインデックスが使えず 遅いままだったので、pg_bigmを導入してこれを解決する。 pg_bigmは簡単に言うと日本語の中間一致like検索でインデックスを 使えるようにしてくれるPostgreSQL用モジュール。 本家サイトはこちら： pg_bigm pg_bigmの導入方法と使い方についてはこちらのSlideShareを参考にした： PostgreSQLでpg_bigmを使って日本語全文検索 （MySQLとPostgreSQLの日本語全文検索勉強会 発表資料） from NTT DATA OSS Professional Services www.slideshare.net pg_bigmを導入する pg_bigmはR

したいしたい！絶対したい！と駄々をこねられたので調査してみた。 こういった区別なし検索を実装する方法としてパッと思いつくのは、 あらかじめ検索対象となるカラムの検索用カラムを用意して、 データ変更時にトリガーで 元カラムの内容を半角小文字英数字カタカナに変換したデータが入るようにしておき、 検索時はその検索用カラムを使用する、という方法。 これはめんどくさそうだ。 SQL Serverは照合順序の設定で制御できるらしい。 照合順序と Unicode のサポート PostgreSQLも同じことができないかと調べてみたけど、対応してなさそう。 第22章 多言語対応 他に方法がないか調べてみると、 「式インデックス」を使って、自作の変換用関数で変換したデータを インデックスに登録しておく方法を試しているページがあった。 PostgreSQLで全角半角を区別しない問い合わせ この方法なら少なくとも

PostgreSQL9.2以降のバージョンではjson型/jsonb型カラムが使える。 ちょっと特殊な記法を使うけど、 json/jsonbデータ内のキーをDBのカラムと同様に使えるようになるので、 スキーマレスDBのように同じテーブル内のレコードで 異なるデータ構成を持たせることができるようになる。 役に立ちそうなので触ってみた。 環境はPostgreSQL9.5。 公式ドキュメントのjson/jsonb型カラムに関する情報は下記のページに記載されている。 8.14. JSONデータ型 9.15. JSON関数と演算子 9.20. 集約関数 JSONB型カラムを持つテーブルを作成する サンプルとして商品情報を登録するテーブルを作成してみる。 JSON系のカラム型はJSON型とJSONB型カラムがあるけど、 公式ドキュメントによると、登録するJSONデータのマップキーの順序を どうしても守

これまでテスト用にたくさんデータを作成する時は、 PythonやらNode.jsやらでプログラムを書いてた。 blog.honjala.net PostgreSQLならgenerate_seriesという連続値生成関数を利用することで SQLだけで手軽にデータ生成できる、ということを発見したので、 今回は上記の記事と同じようなテストデータをSQLで作成してみる。 環境はPostgreSQL 9.5。 下記のようなテーブルを作成する。 drop table if exists bulk_test_items; create table bulk_test_items( id serial not null, item_cd varchar(100), name varchar(100), created timestamp default current_timestamp, primary

チーム内の雑談で、 Delete-Insert処理を1つのSQL文で行うとしたら、 SELECT文のSELECT句でDELETE用SPとINSERT用SPを呼び出す方法もあるよね、 SELECT句って記述順に実行してくれるのかな？ みたいな話になったので、検証してみた。 検証してみる 検証環境はCentOS環境上のPostgreSQL 9.5。 SPを使うのはちょっと面倒なので、 タイムスタンプを取得する関数で試してみる。 current_timestampやnow()は何度呼び出してもトランザクション開始時の時刻を 返してくれちゃうので、実際の現在時刻を返すclock_timestamp()を使う。 9.9. 日付/時刻関数と演算子 select clock_timestamp() as x, clock_timestamp() as y; 結果： x | y -------------

新しいプロジェクトを開始するにあたり、 ExcelやめてSphinx + reStructuredTextでドキュメント作るようにしません？ という提案をしてみたら、意外とすんなり通った。 概要 — Sphinx 1.5.6 ドキュメント reStructuredText入門 — Sphinx 1.5.6 ドキュメント これでドキュメントのバージョン管理とか、 複数人での共同作成とかがしやすくなりそうで嬉しい。 この提案の前に、 チーム内でのちょっとした技術情報とか議事メモの共有に Markdown形式のファイルを使うようにしていて、 テキスト形式の文書管理に抵抗がなかったのが良かったのかもしれない。 で、どうせならこれまでMarkdownで作成したファイル(結構作ってた)も reStructuredTextに変換して、SphinxでHTML化して閲覧できるようにしたい！ ということで今回

ライトな言語で開発する時とか、文章を書く時は テキストエディタとしてVim(KaoriYaさんのWindows版Vim)を長く使用している。 www.kaoriya.net 根が浮気症なので Spacemacs+EmacsとかSublimeTextとかAtomとかLightTableとか 話題になったエディタには 「これこそ俺が求めていたもの！」 と手を出して使ってみるのだけど、半年後には 「やっぱりVimだな」 ということでVimに戻ってしまう。 そんな感じで新しいエディタを使うのは楽しいのだけど、 使い方を学ぶのに結構時間を使うので、 時間を無駄にしないように、 この条件を満たさないエディタには手を出さない！（どうせVimに戻ってくるから！） というルールを決めてみる。 テキストオブジェクトのような簡易範囲選択機能があること テキストオブジェクトというのは、 「"“で囲まれた範囲」とか

Pythonを堪能したのでJavascriptに戻ってきた。 JavascriptでPythonのジェネレータみたいな機能はないのかな、 と調べてみると、ES6(ES2015)で追加され、Node.jsはES6対応済みらしい。 そういえばES5もES6もよく調べたことないな、と思って 調べてみると、便利機能が山ほど追加されててびっくり。 Javascript好き、と言いながら大分遅れたコードを書いてたようだ。 とりあえず今後絶対使おう！と決めた要素を練習がてらまとめておく！ まずはconstとlet 今までvarを使ってた変数宣言にconstとletが使えるようになった。 constは再代入しない定数宣言、letはレキシカルスコープの変数宣言。 const products = [ {name: "item1", price: 10}, {name: "item2", price: 20}

過去に下記のような、ファイルを複数に分割する方法について記事を書いた： blog.honjala.net この記事に書いたコードをもう少しエレガントに書けないものか、 と方法を調べていて、 Pythonのジェネレータが使えそうだったので色々試してみた。 Pythonのジェネレータについて ジェネレータを意識して使ったことがなかったので、まずは使ってみる。 下記のページを参照した： postd.cc ジェネレータを使用する際は、 「ジェネレータ関数」と ジェネレータ関数が返す「イテレータオブジェクト」の 2つの要素を使う。 yield文で返り値を返す関数を定義すると、ジェネレータ関数になる。 ジェネレータ関数は呼び出しても中の処理が実行されるわけではなく、 代わりにイテレータオブジェクトを返す。 イテレータオブジェクトをforループなりnext関数なりで使用すると、 ジェネレータ関数で定義し