JavaScriptにおけるURLエンコードされたCookieの取得

JavaScriptでURLエンコードされた文字列を変換するには decodeURIComponent を使用しますが、UTF-8以外の場合（Shift-JIS等）は文字コード変換が必要です。encoding.jsを使うと下記のように書けます。 github.com Encoding.codeToString(Encoding.convert(En…

Circle CIでCloud Functionをデプロイする

Circle CIからGoogle Cloud Functionsに関数をデプロイする方法を調べたのでメモします。 具体的には、GitHub → Circle CI → Cloud Source Repository → Cloud Functionの流れで継続的インテグレーションと継続的デプロイを行います。 開発者がGitHubのリポ…

Google Cloud FunctionsでTwitter検索のRSSフィードを作る

Twitterの検索結果をRSSフィードで提供するサービスはいくつかありますが、リフレッシュ間隔がいまいちだったのでGoogle Cloud Functionsで自作することにしました。 Twitter Search APIの結果をRSSフィードに変換して返して、SlackでRSSフィードを購読しま…

Create React AppでChrome Extensionを開発する

Reactのアプリを開発するにはFacebook謹製のcreate-react-appが便利です。しかし、create-react-appはWebアプリの開発に特化しているため、Chrome Extensionの開発には使えない問題があります。スクリプトを少し変えてwatch buildを行う方法を紹介します。 C…

スプレッドシートでカラムの更新日時を記録する

Google Appsのスプレッドシートは便利ですね。特に、JavaScriptで独自の関数やトリガーを定義できるのでハックが捗りますね。本エントリではスプレッドシートで特定のカラムの更新日時を記録する方法を説明します。 題材 スプレッドシートで下図のようなタス…

Hubotでkuromoji.jsによる形態素解析を試す

Hubotでkuromoji.jsを使って形態素解析を行う方法を調べてみました。形態素解析のライブラリは node-mecab-async も有名ですが、Mecabのバイナリを用意する必要があります。kuromoji.jsはPure JavaScriptの実装なので、Herokuに簡単にデプロイできます。 yo …

Vue.jsからReact.jsに移行した

公開しているChrome ExtensionをReactベースに移行してみました。これは「新しいタブ」を置き換えるもので、新しいタブを開いた時に軽くて見やすいブックマークページが表示されるようになります。 Chromeストアから入手できます。 chrome.google.com これま…

vue.jsでInfinite Scrollを実装する

ページを下端までスクロールしたら次のページが読み込まれるInfinite Scroll（無限スクロール）をvue.jsで実装する方法を調べてみました． 一般的なInfinite Scrollの実装方法 スクロール可能な要素の scroll イベントを捕捉して，表示領域の位置を計算しま…

Gistに置いたMarkdownをスライドショーで表示する

ちょっとした勉強会では，発表内容をMarkdownに書いてスライド表示できると便利ですね．そこで，Gistに書いたMarkdownをスライドショー形式で表示するツールを作りました． このツールは，Evernote風のGistクライアント Gistnote に統合されています． Evern…

Vue.jsとPage.jsでページ遷移に合わせてタイトルを変える

Vue.jsとPage.jsを組み合わせて使う場合に，ページ遷移に応じてタイトルバーを変える方法を考えてみました．Gistnote ではこの方法を使っています． Why? Page.jsでページが遷移するとブラウザに履歴が残ります．履歴のタイトルがすべて同じだと分かりにくい…

Evernote風のGistクライアント Gistnote を作ってる

ちょっとしたメモを残すにはGistが便利です．一方で，Evernoteのような一覧表示があるともっと便利そうです． そこで，Evernote風のGistクライアント Gistnote を作っています． https://gistnote.github.io 最低限の機能を実装したのでいったん公開します．…

GitHubリポジトリの一覧をWebサイトに貼り付ける

自分のWebサイトにGitHubのリポジトリ一覧を表示すると、どんなプロダクトを作っている人なのか、どんな言語や分野が得意な人なのかといったプロフィールを手っ取り早く伝えることができます。本稿では、Webサイトにリポジトリ一覧を貼り付ける方法を考えて…

QRコード生成サービスを作った

Webブラウザ上でQRコードを生成するサービスを作りました。 https://getqrcode.github.io Get QR Code - QR Code Generator JavaScriptのみでQRコードを生成するサービスが見つからなかったので作ってみました。外部のサーバとは通信しないので、秘密情報を…

URI Template JSを使って簡単にURIを組み立てる

JavaScriptでURIを組み立てる時、文字列の連結で頑張ったりしてませんか？ var detail = 1; var products = ['iphone5', 'nexus7']; products.forEach(function (product) { $.get('/products/' + product + '?detail=' + detail).done(/* ... */); }); RFC6…

非同期処理の直列実行を Array.reduce() で書いてみる

jQuery 1.5から Deferred Object がサポートされて、AJAXのレスポンスは Deferred API を通じて受け取れるようになりました。例えば、下記のように $.post() の結果は .done() もしくは .fail() で受け取れます。 $.post('/reserve', {product: 'iPhone5'}).…

Knockout.js で Drag and Drop

Knockout.js で jQuery UI の Draggable and Droppable を利用する方法を説明します。まず、新しい binding を定義します。 draggable binding 初期化時に $(element).draggable() を実行し、要素をドラッグ可能にする。 droppable binding 初期化時に $(ele…

入れ子になっている要素のイベント処理を制御する

Knockout.js を使う場合に、入れ子になっている要素のイベントを上手く制御する方法について書きます。公式ドキュメントに記載されている典型的なパターンですが、混乱しやすいのでまとめてみました。 やりたいこと 以下のHTMLを考えます。 <div class="task"> <input type="checkbox" /> <span class="title">温泉を予約する</span> <div class="notes"></div></div>…

jQueryのクロスドメインAJAXをIEに対応させる

XMLHttpRequest Level 2 に対応しているWebブラウザは、（ある条件下で）異なるドメインにAJAXリクエストを投げることが可能です。jQueryでは以下のように書けます。 $.ajax({ context: this, type: 'POST', url: 'http://www.example.com/hoge', /* 異なる…

文章比較ツール

新旧のテキストを比較したいときは、文章比較ツールが便利です。追加・削除された文字数も数えてくれます。Google検索したらキーワードが「文書比較ツール」に訂正されてしまいました。

みずほダイレクト入出金明細の変換ツール

私はみずほ銀行に口座を持っていて、Webで明細確認や振込ができるみずほダイレクトを使っています。みずほダイレクトは割と使いやすいのですが、入出金明細をコピペして取り扱いにくい難点があります。そこで、取り扱いやすいようにテーブルに変換するツール…

Webアプリの実行時にJavaScriptを圧縮する

Webアプリの公開にあたっては、データ転送量や実行効率の点からJavaScriptを圧縮（minify）して配信することが推奨されています。ここでは実行時に圧縮する方法を説明します。JavaScriptの圧縮にはGoogle Closure Compilerを利用します。Maven pom.xmlに以下…

スマートフォンで使えるテキスト比較ツール

スマートフォンで使えるテキスト比較ツールを作ってみました。利用シーンはともかく、JavaScriptだけで動作するのでどこでも使えます。 テキスト比較ツール Text Diff Tool UIライブラリは jQuery Mobile 、テキスト比較エンジンには google-diff-match-patc…

バリデーション、読み込み中表示、通知メッセージ機能を備えたAjaxフォームの実装

Webアプリでは、フォームに入力された値をチェックしてAjaxでサーバに送信するパターンがよく使われます。ここでは、下記のプラグインを組み合わせてAjaxフォームを実装する方法を紹介します。 jQuery Form Plugin - Ajaxフォーム jQuery Validation Plugin …

Google Picasa ウェブアルバムの写真をスライドショーで表示する

旅先の写真をWebサイトで公開してみました。Google Picasa ウェブアルバムにアップロードした写真を Galleria でスライドショー表示しています。こちらを参考にさせていただきました。 Galleria – Responsive JavaScript Image Gallery GData API のJSONP出…