こうなりました

新しくなった Codogue.com がこちらです。

少しずつ長い期間で地味に進めて来まして、ようやく形になったところ。
書き方の好みや開発環境もだいぶリリース当初から様変わりしているので、中身も全部書き直してます。
デザインは、途中で飽きましたが最後まで貫きました。

ついでに追加された 「Facebookmark」

せっかくの機会なので一つアプリを増やしてみました。

Facebookmark

これは、Facebook上で自分が「シェア」してきたリンクを一覧表示・検索するアプリです。
（Facebookへのログインが必要です）

何らかのソーシャルブックマークを使っているのなら勿論それで用は足りるのですが、
Facebookのシェア機能も、公開範囲を設定できたりコメントを残せたりと、わりとログを残す場として便利に使えたりします。
ただ、Facebook上だと昔にシェアした物を探すのは正直骨なので、このアプリを作ってみたわけです。

文字列検索機能は、自分がつけたコメントやリンクのサマリーも含んで検索してくれます。
（後からつけたコメントは含めない様です。残念。）

まとめ

他にもいくつか実験してみたいネタはあるのですが、そのうちいずれ…

今後共よろしくお願い致します。

これはなに

MultiMentions : 一括メンションジェネレーター | CoDogue

多数のアカウントに対して一斉にメンションを送る為のジェネレータです。

2,3ユーザーならば何の問題もないのですが、
数十人〜に一括して送るのはツイッターの文字数制限をクリアする為に
一々小分けにしなくてはならず、骨が折れますね。

MultiMentionsはそんな分割作業をお手伝いしてくれるツールです。

使用例

例えば大規模なパーティの幹事をしていて、参加者に一斉に確認事項を送りたいけど、
全員相互にフォローしているわけではないので、Twiplaの一括DMが送れない。捗らなくて辛い。

そんな時は

Twipla のコメントで宛先を『「参加者」全員』にしてコピーして

MultiMentionsの「ユーザーリスト」に貼り付けます。

「メッセージ」に送りたいメッセージを入力して、「メッセージの生成」ボタンをクリックします。
ここではまだメッセージは送信されないので安心してクリックしてください。

すると下に連々と分割されたメッセージが出てきます。

これをコピーしてTwitterで投稿するも良し、
各メッセージについている「Tweet」ボタンをクリックしても投稿する事が出来ます。
「Tweet」ボタンで投稿完了すると、そのメッセージは消えます。

注意事項など

• 
  

  分かりやすいTwiplaを例に出してますが、ユーザーリストがその形式でなければいけないなんて事はありません。
  
  何らかの文字で区切ってあるTwitterアカウントの羅列であれば、動くはずです。

  
  
• 
  

  URLを短縮してから入力すると、ツイート時に文字制限オーバーのエラーが出る事があります。
  
  （サードパーティの短縮サービスより、公式の t.co の方が文字数が多い場合があるせいではないかと思っています）

  
  
• 
  

  「以下のユーザーは文字数の関係で入りませんでした。」というメッセージが表示される事があります。
  
  これは、メッセージと足すだけで文字数制限を超えてしまうユーザーです。メッセージを短くする等の工夫が必要です。

  
  
• 
  

  「Tweet」ボタンは初回だけ認証画面が表示されます。
  
  二つ目以降のメッセージでは表示されずにそのままツイートされるのでご注意ください。

  
  

まとめ

たまたま大規模なパーティに関わる機会があったので、作ってみました。
幹事さんの手助けになれば、幸いです。

これはなに？

• CoDogue – ちょこざいなツール格納庫

「CoDogue」は「コドーグ」と読みます。
タイトルどおり、ちょこざいなツールを格納していくサイトです。

ちょこざいなツールは各地にあると思いますが、
1サイトにまとまっていたら便利なのではないかと思い作ってみました。
まだ2つしかツールはございませんが、じわじわと増やしていくつもり。

初期メンバーを軽く紹介など。

MkPasswd

そんまんまです。パスワードを生成します。
使う文字種と文字列の長さ、生成する数を指定できます。
オマケ機能として、テキスト形式でダウンロードできます。

TsvTo

TSV形式のテキストデータを様々な形式にコンバートするツール。
以下の形式に対応。

• JSON
• XML
• PHP array
• HTML Table

例えば、ExcelやGoogleドキュメントのスプレッドシート上のデータをコピーして、
それをペーストしてコンバートしたりして使います。
数値とブール値ぐらいはそれっぽくしてくれます。

ご要望、不具合等ございましたら是非に。

1. 必要なもの
2. 短縮してみよう
3. 展開してみよう
4. めんどくさいのでクラスにしてみる
5. (おまけ) JavaScriptで展開する

必要なもの

APIのURLを控えておく

https://www.googleapis.com/urlshortener/v1/url

APIキーを取得しておく

Google APIs Consoleで
「URL Shortener API」をアクティブにしてAPIキーを控えて来る

今回は、PHP+cURLでやってみることに。
とりあえず持っている情報を変数につっこむ。

$api_url = "https://www.googleapis.com/urlshortener/v1/url";
$api_key = "[あなたのAPIキーを入れてください]";

短縮してみよう

URLの短縮は、APIに次のようなJSONをPOSTで送りつけます。

{“longUrl”: “http://www.google.com/”}

$longUrl = "https://blog.mach3.jp/";

$curl = curl_init();
$curl_params = array(
    // APIのURLに ?key=[your-key]を足してやります
    CURLOPT_URL => $api_url . "?" .
        http_build_query( array( "key" => $api_key ) ),
    // ヘッダをapplication/jsonに
    CURLOPT_HTTPHEADER => array( "Content-Type: application/json" ),
    // POSTで送ります
    CURLOPT_POST => true,
    // ロングURLの情報をJSONに加工して渡します
    CURLOPT_POSTFIELDS => json_encode( array( "longUrl" => $longUrl ) ),
    CURLOPT_RETURNTRANSFER => true
);
curl_setopt_array( $curl, $curl_params );
$result = json_decode( curl_exec( $curl ) ); // 返り値はJSONなのでデコード
var_dump( $result );

レスポンスはJSONで返って来るので、json_decodeでオブジェクトにしてやります。
最終的に格納されている情報はこんな感じ。

object(stdClass)#1 (3) {
  ["kind"]=>
  string(16) "urlshortener#url"
  ["id"]=>
  string(19) "http://goo.gl/ZZKde"
  ["longUrl"]=>
  string(21) "https://blog.mach3.jp/"
}

展開してみよう

展開は簡単。パラメータくっつけてGETでとってくるだけです。
先ほど作った「http://goo.gl/ZZKde」を展開してみます。
こんなリクエストをおくって返事をもらってるだけ。
労力惜しむならfile_get_contents()でもよし。

https://www.googleapis.com/urlshortener/v1/url?key=[your_api_key]&shortUrl=[展開したいURL]

$shortUrl = "http://goo.gl/ZZKde";

$curl = curl_init();
$curl_params = array(
    CURLOPT_URL => $api_url . "?" .
        http_build_query( array(
            "key" => $api_key,
            "shortUrl" => $shortUrl
        )),
    CURLOPT_RETURNTRANSFER => true
);
curl_setopt_array( $curl, $curl_params );
$result = json_decode( curl_exec( $curl ) );

こんな感じに帰ってきました。

object(stdClass)#2 (4) {
  ["kind"]=>
  string(16) "urlshortener#url"
  ["id"]=>
  string(19) "http://goo.gl/ZZKde"
  ["longUrl"]=>
  string(21) "https://blog.mach3.jp/"
  ["status"]=>
  string(2) "OK"
}

めんどくさいのでクラスにしてみた

GoogleUrl

gist: 69e4a0c19e4776924a21 – Shorten and expand urls using Google URL Shortener API- GitHub

使い方

// createメソッドで初期化。
// new GoogleUrl( $api_key ) でもいいです。
$gu = GoogleUrl::create( "[your-api-key]" );

try {
    // shortenメソッドで短縮
    $shorten = $gu->shorten( "http://www.mach3.jp" );
    var_dump( $shorten );

    // expandメソッドで展開
    $expand = $gu->expand( $shorten->id );
    var_dump( $expand );

} catch( Exception $e ){ die( $e->getMessage() ); }

(おまけ) JavaScriptで展開する

gist: d98215a9cae6ef22e741 – expand url using goo.gl shortener api- GitHub

jQuery使って展開してみました。
「callback」パラメータでJSONP出来るので、大変簡単。
つまりこんなリクエストをすることになります。

https://www.googleapis.com/urlshortener/v1/url?key=[your_api_key]&shortUrl=[展開するURL]&callbck=[コールバック関数名]

var expandGoogleUrl = function( url, key, callback ){
    $.ajax({
        url : "https://www.googleapis.com/urlshortener/v1/url",
        dataType : "jsonp",
        data : { shortUrl : url, key : key },
        success : function( data ){
            callback( data.error  ? false : data.longUrl );
        }
    });
};

// example
expandGoogleUrl (
    "http://goo.gl/fbsS",
    "[your api key]",
    function( url ){
        console.log( url );
    }
);

QRコードがそのまま作れたり（ http://goo.gl/pvqxy.qr ）、
アクセス解析出来たり（ http://goo.gl/info/pvqxy ）と結構便利なサービスです。
短縮したい際には使ってみようかな！

@anywhereはTwitter公式から提供されている、
どのサイトでもTwitterの機能が使えるようになる便利なライブラリです。
cf) ブログで@anywhereを試してみた！ ～ どこでもTwitter

今回はこの@anywhereでユーザー認証をしてみましょう。
※アプリケーションの登録等は割愛致します。
※jQueryを使用しています。

• @anywhereの基本
• 認証に必要な機能
• デモ
• コード抜粋
• めんどくせーな、と思ったら
• まとめ

@anywhereの基本

ライブラリのロード

公式で登録したアプリケーションのAPIkeyを付加したURLで、ライブラリをロードします。

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=<ここにAPIkeyを記述>&v=1"></script>

twttr.anywhere

@anywhereはtwttr.anywhereというメソッドが全ての基本です。

twttr.anywhere(function(tw){
    // ここでtwを使ってなんやかんやする
});

twttr.anywhereに渡したfunctionは、
anywhereを使用する準備が整った時にコールされます。
ここでfunctionに渡されているtwに様々な便利な機能が備えられているので、
それらを使ってなんやかんやするわけですね。

認証に必要な機能

cf) @anywhere公式ドキュメント（英語）

tw.isConnected()

ユーザー認証が済んでいるかどうかをbool値で返すメソッド。
認証済みかそうでないかで処理を切り分けたい時に使います。

if( tw.isConnected() ){
    // 認証済みの場合の処理
} else {
    // 未認証の場合の処理
}

tw.signIn()

Twitterにサインインする為のメソッドです。
これをコールすると、別ウィンドウでTwitterに接続するページが開き、
そのページでログインして戻ってくると認証が完了する仕組みです。

$("#Signin").live("click", function(e){
    tw.signin();
});

twttr.anywhere.signOut()

Twitterからサインアウトする為のメソッドです。
※signIn()とは親が異なる点に注意。

$("#Signout").live("click", function(e){
    twttr.anywhere.signOut();
});

authCompleteイベント

認証が完了すると、twの”authComplete”イベントがトリガーされます。
認証完了時に処理を行いたい時にbindして使います。
「おや？bindってjQueryじゃねーの？」とか思われるかもしれませんが、
実際anywhere自体がjQueryを使用して書かれているみたいです。

tw.bind("authComplete", function(e){
    alert("認証完了！");
});

tw.currentUser.data()

tw.currentUserには現在接続中のユーザーの情報が格納されています。
ユーザーの情報を引き出すには、data()メソッドを用います。
console.log()してみると分かりますが、プロパティアクセスでも取得出来ます。
※公式ドキュメントでは言及されていないので、念のためdata()を経由した方がよいかもしれません

// data()で取得
alert( tw.currentUser.data("screen_name") + "でログイン中です" );
// プロパティアクセスで取得
alert( tw.currentUser.screenName + "でログイン中です" );

取得できるユーザー情報のリストは、APIドキュメントを参照
…するよりもconsole.log()してプロパティ見たほうが多分はやい。

デモ

デモページは閉鎖致しました。

• 「Signin」ボタンをクリックすると認証用のページが開きます
• 認証が完了すると表示が切り替わってユーザー情報が表示されます
• テンプレートにjquery.render.jsを使ってみました
  
  cf) シンプルなjQueryテンプレートプラグインを書いてみる

コード抜粋

twttr.anywhere( function(tw){
    var refresh = function(){
        $("#LoginStatus").html("");
        if( !tw.isConnected() ){
            $("#template-loginstatus-normal")
            .render()
            .appendTo("#LoginStatus");
        }else{
            var cu = tw.currentUser;
            $("#template-loginstatus-connected")
            .render({
                "screen_name": cu.data("screen_name"),
                "profile_image_url": cu.data("profile_image_url"),
                "name": cu.data("name"),
                "description" : cu.data("description"),
                "location": cu.data("location"),
                "followers_count" : cu.data("followers_count"),
                "friends_count" : cu.data("friends_count"),
                "listed_count" : cu.data("listed_count")
            })
            .appendTo("#LoginStatus");
        }
    };
    $("#LoginStatus .signin").live( "click", function(e){
        tw.signIn();
        return false;
    });
    $("#LoginStatus .signout").live( "click", function(e){
        twttr.anywhere.signOut();
        refresh();
        return false;
    });
    tw.bind("authComplete", refresh);
    refresh();
});

めんどくせーな、と思ったら

簡単に認証ボタンが実装できる、connectButton()というメソッドが提供されています。
特にカスタマイズする必要がなかったり、面倒な時はこれを使っちゃえばいいですね。

twttr.anywhere( function(tw){
    tw("#MyConnectButton").connectButton();
});

サインアウトボタンにトグルしてくれたりはしないので、
欲しい場合は自分で実装する必要があります。

まとめ

フロントエンドだけで済んでしまうようなWebアプリケーションならば、
お手軽に使えて良いですね。
Webベースのクライアントなんかを作りたい時にも良いかもしれません。
さ、次はPHPのOAuthだ。

TwitterでWebサイトのスクリーンショットを共有するサービス「TweeShot」を試してみました。 それと、Typoでたどり着いたもう１サービス。

TweeShot

TwitterIDでログインし、サイトのURLを入力すれば
Webサイトのスクリーンショットを撮ってくれます。

tweetshots

そしてこちらがTypoで行きついたtweetshots。
Tweeshotとは一文字違いですが、こちらはWebサイトのスクリーンショットではなく、
ツイートのスクリーンショットを撮ってくれるサービス。
ログインは不要で、URLを入力するだけで生成してくれます。

jqury.sharelink.js

Download:
mach3’s js-jquery-sharelink at master – GitHub

SNSのシェアページへのリンクをa要素に付加するだけの単純な内容です。
デフォルトでは現在表示されているページの情報を渡しますが、
オプションで指定すればURLとタイトルを指定する事も出来ます。

各サービスで提供されているコードを使いたくない時や、
調べるのがめんどくさい時に役立てて頂ければ。

対応しているサービス

• Twitter
• Facebook (Share)
• Livedoorクリップ
• はてなブックマーク
• Delicious
• Googleブックマーク
• Yahoo!ブックマーク

簡単な例

クラス「share-twitter」がついたa要素に
Twitterのシェアページへのリンクを付加します。

$("a.share-twitter").sharelink("twitter");

オプションを用いる例

シェアしたいURLとタイトルを指定します。
オプションは、第二引数のオプジェクトで渡します。

$("a.share-twitter").sharelink("twitter",{
    url:"http://www.example.com",
    title:"EXAMPLE.com"
});

使用可能なオプション

url (string) = location.href

シェアしたいページのURL

title (string) = document.title

シェアしたいページのタイトル

target (string) = “_blank”

ターゲットウィンドウ

encode (boolean) = true

URLとタイトルをURLエンコードするかどうかのブール値

デモ

jQueryのプラグインでJSDocを使う時は
どのように書くのが正しいのだろうか…悩み中。

JSLintを使う

JSLint, The JavaScript Code Quality Tool

使い方は至ってシンプルで、
テキストエリアにJSコードをペーストして「Lint」ボタンをクリックするだけ。
よろしくない書き方をしていると、下に連連とエラーを吐いてくれます。

オプションは多数用意されていますが、
よくわからない時、面倒な時は「The Good Parts」ボタンで
一般的なオプションを一括選択してくれます。

cf) YouTube – Using JSLint （動画）

テキストエディタから直接利用する

一々ブラウザでアクセスしてコピー＆ペーストするのは面倒。
そんな人の為はGitHubからソースをダウンロードしてきて、
バッチファイルで使えるようにしましょう。

• douglascrockford/JSLint – GitHub

利用の仕方はエディタによって違ってきますが、
Notepad++でのインストール方法が、Stack Overflowで紹介されていました。
当時から状況も多少変わっているので、要所のみ紹介しておきます。

Notepad++の場合、現在ではプラグインが提供されているそうです。
JSLint Plugin for Notepad++ – Browse Files at SourceForge.net
kntさんより情報頂きました。

2012/12/19現在
Notepad++のjslintはPlugin Managerでインストール出来るようになっています。

kntさんより情報頂きました。

1. GitHubから“fulljslint.js”をダウンロードする。

2. fulljslint.jsファイルの最後に以下のように追記する。

(function() {
    if(!JSLINT(WScript.StdIn.ReadAll(),{passfail:false})) {
        var e;
        for(var i in JSLINT.errors) {
                e=JSLINT.errors[i];
                WScript.StdOut.WriteLine('Lint at line '+(e.line+1)+' character '+(e.character+1)+': '+e.reason);
                WScript.StdOut.WriteLine('  '+(e.evidence||'').replace(/^s*(S*(s+S+)*)s*$/,"$1"));
        }
        WScript.Quit(1);
    }
}());

このコードは、JSLintをWindowsScriptingHost経由で使えるようにする為の物です。

3. NotePadのnppExecから呼び出す用のバッチファイルを作成する

仮にfulljslint.jsを、「c:Program FilesJSLint」に保存したと仮定します。
次のようなバッチファイルを作成し、
同じディレクトリに「jslint.bat」のような名前をつけて保存しておきましょう。

@echo off
setlocal
set P=c:Program Filesjslint
@copy /b "%P%config.txt"+%1 "%P%lastoutput.txt"
@cscript /NoLogo "%P%fulljslint.js" < "%P%lastoutput.txt"
endlocal
:end

何をしているかというと、conf.txtの内容（後述）と、
エディタで編集中のJavaScriptの内容を結合した
「lastoutput.txt」という一時ファイルを生成し、
それをfulljslint.jsに「検査してくださーい」と投げているわけですね。

4. 設定用のconf.txtを作成する

Webの「OPTION」同様に様々なオプションを設定する為の設定ファイルを作成します。
JSLintのWebツールでオプションを選択すると、
オプションの下部に次のようなコメントが表示されます。

/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */

これをそのままコピー＆ペーストすればOKです。
ちなみに上記のものは「The Good Parts」をクリックした時のものです。

5. Notepad++のNppExecで実行する

デフォルト設定ならば、F6でNppExecのダイアログが表示されます。
（もしくは「プラグイン」→「NppExec」→「Exec」）
そこに、次のように入力して「OK」しましょう。

"c:Program FilesJSLintjslint.bat" "$(FULL_CURRENT_PATH)"

設定が上手くいっていれば、エディタの下にコンソールが表示されてエラーを吐いてくれるはずです。
いつでも使えるように「Save」しておきましょう。

他の環境の場合は？

マクロや外部ツールが扱えるようなエディタなら導入できるはずです。
VIMをお使いのひとには、プラグインもあるみたい]です。（試してません！）
WSHがない環境ではSpiderMonkeyやらnode.jsやらを利用するみたいですね。

• hallettj/jslint.vim – GitHub

まとめ

つい「動けばいーや」的なスタンスで書いてしまいがちなJavaScriptですが（主に私が）、
より上質なスクリプティングを目指すためには、ぜひ導入しておきたいですね。

ちなみに過去のスクリプトをJSLintにかけると、軽く落ち込めますよ。（オススメ！）

2010/12/29

WSHのURLがリンク切れになっています。

2011/01/03

ソースがGitHubに移動していたのを機会にバッチファイル等を書き直しました。

2012/09/12

kntさんにNotepad++版プラグインを教えて頂いたので追記しました。

2012/12/12

kntさんにNotepad++のPlugin Managerに関する情報を頂いたので追記しました。

ツイートをブログ等に埋め込める「Blackbird Pie」が公開されていたので試してみました。

Blackbird Pie – Twitter Media

使い方は至ってシンプルで、
URLを入力して「Bake It」をクリックしてパイを焼きあげます。
URLは、個別ツイート画面のURLでなければなりません。
「何時間前」等のリンクから遷移できるあれですね。

すると、埋め込まれるツイートのプレビューと
埋め込む為のHTMLコードが表示されます。
あとはそのHTMLコードをブログのエントリーに挿入するだけ。

こんな感じに埋め込む事が出来ます。実に簡単。
ユーザのページで設定されているスタイルがCSSとして一緒に埋め込まれるので、
見た目も実際の物に近い感じに表示されます。

ただ、まだ試行錯誤の段階の様で、
「もっと短いコードにする」「実際のタイムスタンプを挿入する」
等の問題点がToDoにあげられています。確かにすごく冗長なコードです。

余談。Blackbirdはイギリスではクロウタドリ、ただし米語ではクロムクドリモドキを指すそうな。
米国の会社なので後者なのでしょうか。どちらも知らない鳥ですが…
そもそもTwitterのロゴの鳥は何という鳥なのか、金属なのか粘土なのか。

Twitterと連動するサービスは星の数ほどありますが、
今回ご紹介するのは「情報の可視化」を試みたWebサービス2点です。

POST-SEASON TWITTER PLAYOFFS

Nike NBA

まずはNikeが立ち上げた「POST-SEASON TWITTER PLAYOFFS」、
ツイートを集めてWeb上でプレイオフを楽しもうというサービスです。
ユーザがお気に入りのチームに関するツイートをすると、
投稿数によってチームのボックスが拡大縮小します。
THUNDERが消えそうだーーーっ！

こちらは「BRACKET」モードの画面。
最も投稿数が多かったチームがチャンピオン！
ユーザー参加型のWeb上の応援合戦ですね。

revisit

moritz.stefaner.eu – revisit – demo

お次は、ツイート間の関連性を可視化した「revisit」。
見ての通り、どのツイートがどのツイートに対するリアクションなのかが
うねうねとビジュアル化されています。

右カラムの「Search terms」に、ツイッター検索の文法で入力すると
その検索結果をもとにビジュアライズされます。

残念ながら日本語は表示されないようですが、
旬なキーワードと「RT」等を組み合わせて検索すると、
なかなか美しい図形を描画してくれますよ。

情報を可視化した作品やサービスを近頃よく目にしますが、
Twitterのリアルタイム性と併せると面白い化学反応が拝めそう。
そのあたりでまた新しいアイデアを拾いたいですね。