ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

Javascript

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

Webアプリを開発する際、 最近の多くのテンプレートエンジンはHTMLをレイアウトや部品に分割して作成し、 それをextendしたりincludeしたりして1つのHTMLとして出力できるようになっている。 部品化することで、ヘッダーとかメニューとかフッターとか、 複数…

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

正月休み、帰省した実家で娘たちがかるた遊びにハマり、 ほぼ毎日祖母やいとこと遊んでいた。 楽しそうだし、瞬発力やら記憶力やらが鍛えられそうで大変良い。 大変良いのだけど、 かるた遊びの困ったところは、プレイヤー以外に読み手が必要だというところ…

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

YouTubeでお気に入りに入れた動画のタイトルを一覧化して見たくなったので、 YouTube Data API経由でデータを取得して表示するNode.jsスクリプトを作ってみた。 APIへのアクセス自体はサクッとできたのだけど、 複数ページデータを非同期で取得するフローの…

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

例えば商品のランキングを手動で管理する場合、 商品データに並び順のようなものをつけてその順序で表示すると思うのだけど、 並び順を設定するUIをどのように作るのが良いか。 近いうちに作る機会がありそうなので、考えてみる。 ReactやVue.jsを使う機会は…

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

Pythonを堪能したのでJavascriptに戻ってきた。 JavascriptでPythonのジェネレータみたいな機能はないのかな、 と調べてみると、ES6(ES2015)で追加され、Node.jsはES6対応済みらしい。 そういえばES5もES6もよく調べたことないな、と思って 調べてみると、便…

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

サーバが重いけどどこを直せばよいか分からないから調査してくれー、と Tomcatのでかいアクセスログファイルを渡されたので、 とりあえずデータベースに入れて調査してみるべ、と ログファイルの内容ををデータベースに取り込むスクリプトを書いてみた。 Nod…

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

Javascriptライブラリの中でも、 Underscore.jsが大変気に入っている。 Underscore.js each、filter、map、reduce等 リスト操作、マップ操作関連の関数が 100以上含まれたユーティリティライブラリで、 他の言語にあってJavascriptにもあったらいいのにな、 …

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

特定のWebサイトを定期的にチェックして特定のキーワードが含まれていたら 通知してくれる仕組みを1つ覚えておくと色々重宝する。 例えば 会社に社員用Webサイトがあるなら、 (そしてそのサイトがRSSもメール通知も提供してないなら) そこに「重要」とか「…

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

どうせ自動化するなら完全自動化したいよね、 ということで今回は作成したGruntスクリプトを Windowsの起動時や毎日の決まった時間に実行できるように タスクスケジューラに登録する方法を紹介する。 この記事はGruntを実行する環境が整っていることを前提と…

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

コミュニケーションというのはなかなか難しいもので、 「急いで確認したいから資料ができたら共有フォルダに入れて、すぐ連絡してよ」 と強めに伝えても、 資料はとっくにできてるのに やれ後で連絡するつもりだっただの、 もうちょっと確認してから連絡する…

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

文字列を検索したりマッチしたものを置換したり、という作業は 技術者が制作・開発する時だけでなく、例えばExcelやWordで文書を編集する際や Webページ内で目的の文章を探したりする場合にも行うもので、 「作業の効率化」という点では欠かせないものだ。 …

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

前回書いたNode.js入門記事の続き。 blog.honjala.net 前回から引き続き、 いかにプログラムの勉強無しで自動化できることを増やすか、 もとい、 いかに他部署のノンプログラマに自動化ツールを使わせて自分への作業依頼を減らすか、 をマイテーマに少しずつ…

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

これまでいくつかの記事でNode.jsを使ったスクリプトを載せてきたが、 自動化のためのスクリプトを書いて動かす環境として Node.jsは手軽だし速いし色々ライブラリは揃ってきているし なかなか良い環境だと感じている。 Web系の仕事をしていればJavascriptは…

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

仕事でチーム間のコミュニケーションツールとして使い始めたチャットワークだが、 最近は「いろんなサービスやスクリプトからの通知を集めるツール」としての利用がメインになってきている。 www.chatwork.com 以前記事にした、 「Subversionのコミット情報…

Node.jsでドメインのはてなブックマーク合計件数を取得する

ブログを書いていると、 自分が書いた記事にどれくらいブックマークがついているかが 気になるものである。 はてなブログでブログを管理している場合は、 ブログ管理画面や「はてなのお知らせ」というChrome拡張で ブックマークされたことを知ることができる…

Subversionにコミットしたらチャットワークに通知するNode.jsスクリプト

ある開発プロジェクトで、 非技術系のメンバーにも進捗を知っておいてもらいたいものの、 「お前らSubversion入れろ」とか「リポジトリログを見ろ」といっても見そうになく、 いちいち伝えるのも面倒大変そうだったので、 Subversionにコミットがあったらメ…

Node.jsでWebページのレスポンス時間をチェックする

個人的にNode.jsを習得しようと色々調べてた時に 仕事でWebアプリの速度改善の依頼が飛び込んできたので、 Node.jsでHTTPリクエストのレスポンス時間をチェックしたい時は どう書くのかな、と調べてみた。

Node.jsでRedmineのREST APIにアクセスしてチケット取得&一括登録

とあるWeb開発プロジェクトで WBS(Excel製)に書かれた、機能ごとの開発担当・開始日・期日・予定工数を そのままRedmineのチケットとして登録するという、 手作業でやったらえらく時間のかかりそうな作業があったので、 RedmineのAPI経由でチケットを一括登…

Node.jsのRESTクライアントモジュールでBit.lyのAPIにアクセスする

Node.jsのRESTクライアントモジュールを試すため、 以前Groovyで作成したBit.lyの履歴を取得するスクリプトをNode.jsで焼きなおしてみる。 「node-rest-client」というモジュールを使用した。 get_bitlinks.js var RestClient = require('node-rest-client')…

MongoDBに保存したデータをNode.js+ExpressでWeb表示する簡単なサンプル

そろそろNode.jsスクリプト作成にも慣れてきたので、 簡単なWebアプリ作成に挑戦してみた。 Meteor、MEAN.js、Sails.jsなど色々あって迷ったけど、 まずはシンプルにExpressを使ってみる。 MongoDBコレクションに保存された情報を Webページ上に一覧表示する…

ApacheのアクセスログをMongoDBコレクションにインポートするNode.jsスクリプト

MongoDBの勉強を兼ねて、Apacheのアクセスログを後でログ分析や ビジュアライズに使えるようにMongoDBにインポートするスクリプトを書いた。 下記のスクリプトはログファイルを行単位で読み込んでMongoDBの 特定のコレクションに登録する。 行単位のファイル…

Nashornスクリプト実行時のクラスパス設定を容易にするためにNasven.jsを使う

Nashornというのは、Java8に同梱されている新しいJavascriptエンジンで、 Javaライブラリを呼び出して利用するJavascriptプログラムを作成することができる。 Node.jsで適当なライブラリが見つからない場合やJavaライブラリに精通していて ちょっとしたスク…

Javascriptでできることを調べて、メイン言語にするメリットを確認する

Javascriptがプログラミング言語としてどうか、ということはさておいて、 「もうJavascriptさえ覚えておけば何でもできるんじゃない?」 というくらいJavascriptでできることが増えているので、それをまとめてみる。 Javascriptでできること Webサイトのクラ…

Javascript(node.js)でExcelのシート一覧を出力する

node.jsはWindowsでもLinuxでも同じスクリプトが そこそこ安定して動くので嬉しい。 今回は、ExcelJSモジュールを使って、 Excelのシート一覧を出力するスクリプトを書いた。 リダイレクトでファイルに出力できる。 簡単なスクリプトだけど、こういうものを…

Node.jsとwebshotパッケージでWebサイトのスクリーンショットリスト作成を自動化する

Web開発を仕事にしていると 「マニュアルやプレゼンに使うのでWebアプリのスクリーンショットをくれ」 と依頼されることがよくある。 ChromeのFireshotのようなブラウザの拡張機能を使ったりすれば 1画面ずつ撮っていけるのだけど、 chrome.google.com たく…

treeコマンドで出力したJSONをExcelで階層表示できるように変換する

あるプロジェクトのソース分析を行う必要があったので、 まずはソースファイルの一覧をExcelに出力してみることにした。 treeコマンドがいい感じで階層出力してくれるのだけど、 それをそのままExcelに持っていくと文字化けするので、 treeコマンドから一旦J…

Java8のJavascriptエンジンNashornでパスワード付きExcelを開く

以前Groovyで作成したパスワード付きExcelを開くスクリプトをJavascriptでも 書いてみよう、ということでnode.jsで色々試してみたところ、パスワード付き Excelに対応しているライブラリが見つからなかった。 (普通にExcelを操作するだけならxlsjs等良さげ…

CakePHPとjQueryで汎用的なリンククリックカウンターを作成する

ページに記載した外部リンクが何回クリックされたかを知りたかったので、 リンククリックをカウントするスクリプトを作成した。 Google Analyticsのイベントトラッキング機能の簡易版。 リンクにあらかじめ決めたCSSクラスとリンクを識別するための属性を 設…

jQuery MobileでiPhone用Webサイトを作成する

jQuery Mobile http://jquerymobile.com/ いろいろはまったので、メモ。 バージョンは 1.0 ALPHA 2。 page毎にHTMLを分けて作成する これは好みだと思うのだけど、URL直指定でそれぞれのページを呼び出せたりするようにするなら、分けた方が簡単な気がした。…

Google AJAX Search API でシンプルにローカル検索

Google AJAX Search API http://code.google.com/intl/ja/apis/ajaxsearch/ ドキュメントに掲載されているサンプルでは備えつけのフォームや検索結果を表示する ようになっているのだけど、Javascript内で検索処理を実行して 結果をJSONで処理する方法もあっ…

jQuery UI でダイアログ表示

別の記事でも書いたけど、個人で開発しているWebアプリでは、だいたいjQuery UIを使用してる。 今回はその中でもよく利用しているdialogの使い方をまとめておく。 dialog機能を使うと、割と簡単にエラーダイアログやフォーム表示用のサブウィンドウを作成す…

jQuery UI.Layout Plugin を使って単一ページUIを作る

Google App Engineを使うようになって、リクエスト時間の節約のために 重いページ(HTML)のロードは最初の1回だけにして、以降はページ遷移なしで AjaxでJSONのやりとりをしてビューを変更するような方法をとることが多くなった。 UIについても毎回デザイン…

地図上で場所を選択すると選択した地点の座標をフォームのhiddenフィールドに入力するプラグイン

jQueryプラグインの作成方法を学びつつ、色々作ってみる。 今回は、HTMLのフォームで場所の情報を登録する際に座標情報を入力してもらうのに使えそうなプラグインを作った。 表題のままだけど、地図で地点を選択するとその座標情報が指定したフォームフィー…

jQueryでリスト・テーブル操作 - 行の上下移動

ここ数件のプロジェクトでリストやテーブルの行追加、削除やソート、上下移動などの処理を書く事があったので、メモしておく。 今回は行の上下移動。 リストの各行に「上へ」「下へ」というボタンなりリンクなりアイコンなりを配置しておき、それをクリック…

Thickboxで呼び出し元ウィンドウとデータのやりとり

他に方法が思いつかなかったので、親ウィンドウ側に関数を用意して それをThickbox側から呼び出す方法をとった。 iframe版しか考えていないので、ajax版の使い方だとまた別の方法があると思う。 parent.html <head> ... <script type="text/javascript" src="jquery-1.3.1.min.js"></script> <link rel="stylesheet" href="thickbox.css" type="text/css" /> </link></head>

django+jQuery Form Pluginでファイルアップロードしてみた

前回発見したjQuery Form Pluginを使って実際にファイルをアップロードするサンプルを作った。 http://d.hatena.ne.jp/piro_suke/20080615/1213498024 ファイルをアップロードする場合のみ、iframeが使用される関係でサーバ側から 返却するデータをtextarea…

jQuery Form Pluginでファイルアップロード

通常のフォームを画面遷移なしで送信可能にしてくれる jQuery Form Pluginを使ってみた。 jQuery Form Plugin http://malsup.com/jquery/form/ フォームに何も加えなくてもjsファイルを読み込んで ajaxForm関数でサブミット後の処理を定義するだけで サブミ…

FlexとJavascriptの連携

Actionscript3で作成したSWFからActionscript2で 作成したSWFは呼び出せないようだ。 YoutubeのAPIで提供される動画再生用のSWFがActionscript2で 作成されたものらしく、Flex2(Actionscript3)から呼び出しても うまく動いてくれなかった。 (やり方がおかし…

jQueryでselectメニューで選択中のoptionの表示テキストを取得する

これまたもっといい方法があると思われるが、一応メモしておく。 <script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.pack.js"></script> <script type="text/javascript"> $(function() { $("#add_customer_btn").click(function() { if ($("#customer_select").val() != "") { var customer_id = $("#customer_select").val(); al…

jQuery用のいい画像範囲選択ライブラリが見つからなかったのでprototype.js用ライブラリを使う

javascriptで画像の範囲選択をしたかったのだけど、 jQuery用のinterface.jsの機能ではちょっと物足りなかったので、 prototype.js用のライブラリとして作られたImage Cropper UIライブラリを 使ってみる。 Image Cropper UIライブラリのダウンロードはこち…

jQueryで画像上にあるマウス位置の座標を取得する

画面に対する絶対的な座標の取得方法はすぐ見つかったが、 画像の左上を基点とする座標を取得する方法を見つけるのに手間取ったのでメモ。 マウス座標の取得方法には色々ある(offsetXやらlayerXやら)ようだが、 ブラウザによって取得できる値が異なるみた…

Javascriptで正規表現マッチの後方参照

見つけにくかったのでメモ。 コードがハイライトされるというだけで、ソースを載せたくなるのはなぜだろう。 タグに設定されたid属性から数値で設定されたID値を取得する。 jQueryを使うとリストの中のliタグや、テーブルの中のtdタグに設定された IDを一括…

jQueryとDjangoでJSON形式でサーバから返したリストデータをセレクトメニューに表示

DjangoのJSONデータ生成処理も、jQueryのタグ生成処理もなかなか使いやすい。 jQueryでサーバサイドを呼びだし、サーバサイドでDjangoでModelのリストを JSON化してクライアントに返し、それをselectタグ内のoptionタグとして生成する。 views.py from djang…

jQueryでテーブルのチェックボックスを一括選択するチェックボックスを作成する

Djangoを使う時はJavascriptライブラリにjQueryを使うのが流行らしい。 jQueryは最近注目されている楽しいライブラリのようなので、以前prototype.jsで 実装した、チェックボックス一括チェック処理を書き換えてみる。 <script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.pack.js"></script> <script type="text/javascript">

Javascriptで文字列型の数値を数値型に変換する

var x = "15" + 5; こう書くと、+は文字列結合演算子として認識されてしまい、xは155となる。 var x = "15" - 0 + 5; 引き算をすると文字列型の数値が数値型に変換され、xは20となる。 ...これが一番いい方法なのか?

Javascriptでテーブルのチェックボックスを一括選択するチェックボックスを作成する

これもまた、とりあえず動くレベル。 prototype.jsを使っている。Djangoのテンプレートだが、あまり関係なし。 <script type="text/javascript" src="/static/javascripts/prototype.js"></script> <script type="text/javascript">

Javascriptでselectメニュー要素を更新

検索してなかなか見つからなかった情報を解決した時は、エントリにして載せることにした。 将来同じ問題にぶつかった時を考えると、自分がどこかに書いたメモを探すよりも先にWebで検索するだろうし、そんな時に自分が過去に書いたエントリが出てきて解決で…