• 前回からの続きを「もっと読む」ボタンを表示
• ツイートの会話を表示するページを追加
• 返信メニューに「URLを引用して投稿」を追加
• ユーザ名の右クリックメニューに「ページ内のユーザ名を検索」を追加
• httpsで始まるTwitterアドレスに対応
• トレンド地域に日本の都市を追加
• その他、微調整

もっと読むボタンについて
前回からの続きを、設定>接続タブで指定された件数を読み込んだ後、まだ未読があると思われる場合に「もっと読む」ボタンを表示するようにしました。読み込める数には限りがあるので十分とは言えませんが、少しは役に立つと思います。(通常TLで800件、検索で5-7日分が限度です)

ツイートの会話について
特定のツイートに関連した会話を表示できるようにしました。ツイートの右クリックメニューから「会話を表示」またはユーザTLで再度同じユーザ名をクリックすると、ツイートの会話ページを表示します。キーボードからはShift+Enterを押してください。
※会話表示は取得できないことも多く、取得できても数が少ないため、あくまでユーザTLを補助するような使い方がおすすめです。

前回のエントリーで説明したように、ドラッグ&ドロップはドラッグ側とドロップ側に分かれていて、今回はドロップ側の実装だけで済みます。(基本的なドラッグ&ドロップの実装は、前回のエントリーを参照してください)

ファイルのドラッグ&ドロップ

ファイルのドラッグがされているかどうかは、ドラッグイベントで渡されるdataTransferオブジェクトを使って判断できます。
ファイルをドラッグ&ドロップしたとき、dataTransferオブジェクトの状態は次のようになります。

dataTransfer.types = ["Files"];
dataTransfer.files = [Fileオブジェクト];

普段MIMEタイプが格納される場所には、”Files” という文字列が入ります。
ファイルを参照するときは、dataTransfer.getData()ではなく、dataTransfer.files[0] のようにアクセスするところが違います。

function onDrop(event) {
    var files = event.dataTransfer.files;
    for (var i=0; i<files.length; i++) {
        console.log(files[i].type + ", " + files[i].name);
    }
    event.preventDefault();
}

Fileオブジェクト

Fileオブジェクトはファイルを表現したもので、ドラッグ&ドロップの他、フォームのファイル選択 <input type=”file”/> にも使われています。

// Fileオブジェクトのプロパティ
file.type = ファイルのMIMEタイプ (image/jpegなど)
file.name = ファイル名 (パスは含みません)
file.size = ファイルサイズ

// <input id="upload" type="file"> からFileオブジェクトを得る
var files = document.getElementById("upload").files;

ファイルを読み込む

ファイルの読み書きは、FileReader や FileWriter を介して行います。(現時点でFileWriterを実装したブラウザはなさそうです)

テキストを読み込む場合はFileReaderのreadAsText()を、画像などを参照する場合はreadAsDataURL()を使います。読み込みが非同期になる点に注意してください。

function onDrop(event) {
    var files = event.dataTransfer.files;
    if (files.length > 0) {
        if (files[0].type.match(/^text\/ /)) {
            previewText(files[0]);
        } else if (files[0].type.match(/^image\/ /)) {
            previewImage(files[0]);
        }
    }
    event.preventDefault();
}
function previewText(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        document.getElementById("textarea").value = event.target.result;
    };
    reader.readAsText(file);
}
function previewImage(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        document.getElementById("image").src = event.target.result;
    };
    reader.readAsDataURL(file);
}

ファイルをアップロードする

ついでにファイルをアップロードする方法も調べてみましょう。
最近のブラウザは、アップロード可能なXMLHttpRequest Level2相当の機能を含んでいるのでこれを使います。

function onDrop(event) {
    var files = event.dataTransfer.files;
    if (files.length > 0) {
        if (confirm("ファイルをアップロードしますか？")) {
            uploadFiles(files);
        }
    }
    event.preventDefault();
}
function uploadFiles(files) {
    var form = new FormData();
    for (var i=0; i<files.length; i++) {
        form.append("files[]", files[i]);
    }
    var req = new XMLHttpRequest();
    req.open("POST", "http://foo.bar/upload.php");
    req.send(form);
}

サーバ側で通常のフォームとして処理するために、XMLHttpRequestでFormDataを送信します。もし本格的にアップロードを使うときには、進捗バーや送信完了を知らせるためのダイアログを用意する必要があるでしょう。

あとがき

HTML5のWebアプリでファイルを簡単に使えることが解りました。ファイルをドロップできるWebアプリはまだ少ないので、採用すれば、おっ何だか凄いぞ！と思ってもらえるかもしれません。

File APIに関してもっと詳しく知りたい方は、W3Cのドラフトをご覧ください。

ドラッグ&ドロップの実装は、ドラッグ側とドロップ側に分けて考える必要があります。HTML内の要素をドラッグして同じHTML内にドロップするのであれば両方必要ですし、OSのファイルをドラッグしてHTMLにドロップするのであればドロップ側の実装だけで済みます。

それでは、HTML5でのドラッグ&ドロップ実装がどうなるのか見てみましょう。

ドラッグする要素

ドラッグする要素には、draggable=”true” という属性を指定します。

<ul id="drag">
<li draggable="true">Draggable element 1</li>
<li draggable="true">Draggable element 2</li>
<li draggable="true">Draggable element 3</li>
</ul>

これだけではドラッグが出来ません。次にドラッグイベントのハンドラを登録します。

var drag = document.getElementById("drag");
drag.addEventListener('dragstart', onDragStart, false);
drag.addEventListener('dragend', onDragEnd, false);

ドラッグ開始イベント(dragstart)では、ドラッグするデータを登録します。イベントのdataTransferオブジェクトにMIMEをキーとする文字列データを登録します。これで要素がドラッグできるようになります。
ちなみに、MIMEを変えれば複数の登録ができます。どのデータを使うかはドロップ側の処理次第です。

function onDragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.textContent);
    event.dataTransfer.setData('text/html', event.target.innerHTML);
}

ドラッグ終了イベント(dragend)では、ドラッグ側の後処理を行います。dataTransferオブジェクトのdropEffectプロパティを見れば、ドロップされた(copy, move, link)のか、ドロップされなかった(none)のかを判断できます。以下はドラッグ&ドロップした後に元の要素を削除する例です。

function onDragEnd(event) {
    if (event.dataTransfer.dropEffect == "move")
        event.target.parentNode.removeChild(event.target);
}

ドロップする要素

続いて、ドラッグを受け入れるドロップ要素の指定です。仕様では dropzone=ドロップ条件 の属性を指定すればよいのですが、現時点ではブラウザが対応していないようです。

<div id="drop" dropzone="copy s:text/plain">Drop here</div>
<!-- これはtext/plainデータを受け入れる指定だが現時点では使えない -->

仕方がないのでdropzoneは使いません。ドラッグイベントのハンドラを登録して、ドラッグを受け入れることを宣言します。

var drop = document.getElementById("drop");
drop.addEventListener("dragenter", onDropCheck, false);
drop.addEventListener("dragover", onDropCheck, false);
drop.addEventListener("drop", onDrop, false);

ドラッグ中は真下の要素に対して dragenter, dragover, dragleave のイベントが発生します。このイベントのデフォルト動作は”ドラッグを受け入れない”なので、デフォルト動作をキャンセル(preventDefault)することがドラッグを受け入れる意思表示となります。

function onDropCheck(event) {
    if (event.dataTransfer.types.indexOf("text/plain") != -1)
        event.preventDefault();
}

ドロップイベント(drop)では、ドロップされた側の処理を行います。イベントのdataTransferオブジェクトから、MIMEに対応するデータを取得して何かを行えばよいのです。

function onDrop(event) {
    event.target.textContent = event.dataTransfer.getData("text/plain");
    event.preventDefault();
}

イベントの流れ

ドラッグイベントの流れを表にしたものを載せておきます。

最後に

ドラッグ&ドロップの基本的な説明は以上です。想像していたよりも簡単でした。とはいえ、無理にこの仕組みを使う必要もないのかなとも感じています。

Webアプリ内で特定要素をドラッグできるようにする場合、わざわざHTML5の仕組みを使うメリットは無く、jQueryなどのライブラリを使った方が簡単に実現できます。

逆に外部とやり取りする場合、例えば、OSのファイルをHTMLにドロップできる機能を持たせたり、別のウィンドウ間でドラッグ&ドロップするような使い方では、HTML5のこの仕組みが合っています。
(ファイルをHTMLにドロップする使い方は次回のエントリーに書く予定です)

ドラッグ&ドロップについてもっと詳しい内容を知りたい方は、本家W3Cのドラフト仕様をご覧ください。

既存のコンテンツを新たに構築したサーバへ次々と移動させていきます。これに伴い、一部のコンテンツにアクセスできなくなることがあるかもしれません。

何卒、ご理解のほど、よろしくお願い申し上げます。

• Google翻訳APIの終了(有料化)のため、Webサイトへ飛ばすように処理を変更
• Ctrl+Cでツイートのテキストをクリップボードにコピーするショートカットを追加
• 一部サムネイルアドレスの変更に対処
• 検索API変更に伴う処理の最適化

今回は主にメンテによる更新です。更新による不具合があればお知らせください。

• 全てのリンクがt.co短縮されることに対応
• Twitter検索でのt.co展開に対応
• ユーザTLとリストTLでリツイート表示を追加
• アイテム関連のキー操作を追加
• RESTと検索APIでの更新間隔を微調整
• その他、不具合対応など

t.co短縮について
TwitterにURLを含むツイートを投稿したとき、例外なく、全てのリンクがt.coに短縮されるようになりました。 今まで通り、bit.lyやj.mp等でURLを短縮する操作は残していますが、短縮設定はt.coにすることをおすすめします。

キー操作の追加について
キー操作での閲覧をしやすくするため、”U”でユーザ情報、”I”でリプライ先のツイート表示(in_reply_to_status_idがある場合)を追加しました。その他、スペースでメニューを表示したとき、ツイート中のリンクを選択できるようにしました。

• 日本語のハッシュタグに対応
• t.coリンクの展開/短縮に対応
• Twitter公式でアップロードした画像のサムネイルに対応
• テキストを選択して右クリックから検索を可能に
• その他、不具合対応

URLのt.co自動短縮について
TwitterにURLを含むメッセージを投稿したとき、URLの長さが19文字以上の場合は自動的にt.coで短縮されるようになりました。(これはTwitterの仕様です)  設定>連携タブのURL短縮サービスで何を選択していても、t.coによる自動短縮がされるので注意してください。 ちなみにURL短縮サービスの選択肢にあるt.co(自動)とt.co(強制)の違いは、19文字より少ないURLをt.coで強制短縮するかしないかの違いです。

t.coリンクの展開について
Twitterがt.coを推し進めるようになったため、t.coのURLを展開して表示するようにしました。Twitter公式のようなhttpを省略した形で表示します。(初めは違和感があるかもしれませんがすぐに慣れます)
※t.coリンクの展開はTwitter検索の結果には適用されません。これはTwitter検索結果にリンクの展開情報が含まれないためです。ご了承ください。

• 日本語のトレンドに対応
  → 検索メモのメニューにトレンドを表示します。
• リツイートを無視する指定を追加
• ログインユーザのデータを自動で同期するように変更
• TL上でプロテクトユーザに鍵マークを表示するように変更
• 操作メニューのフォローなどの項目をチェックで表現する形に変更
• 操作メニューのその他にフォローリクエストとリツイート無視を追加
• 設定>一般に@関連のツイートとDMをNGワードの対象から外す項目を追加
• LockerzとPicthurのサムネイルに対応
• その他、バグ修正

リツイートの無視について
特定ユーザのリツイートをTLに表示しないようにできます。ユーザメニューからリツイートの無視を選択。またはリツイートしたユーザ名の部分を右クリックして無視を選択してください。
※今回からユーザストリームでもリツイート設定が反映されるようになりました。

フォローリクエストについて (特にプロテクトユーザの方)
現時点でフォローリクエストの承認や取り消し等の操作をアプリから行うことは出来ません。 これらの操作はTwitterのWebサイトに移動して行ってください。
※リクエストに対してフォローをしても承認したことにはなりません。またリクエストに対してフォロー解除をしても取り消しにはなりません。注意してください。

スクリプトのダウンロードはこちら

• ツイート場所のプレビュー表示を追加
• リスト名が日本語のアドレスに対応
• 短縮すべきURLが見つからないとき、入力ダイアログを表示するように変更
• 最新までスクロールしたら[常に最新を表示]ボタンを有効にする設定を追加
• 操作メニューから@ユーザ#tweetsを検索メモに登録できるように変更
• DMが140文字を超えてもTwitLongerを使用しないように変更
• NGワードの単語判定を一部変更
• NGワードのテストモードを追加

ツイートに位置情報が含まれるとき、ツイートの右下にアイコンを出すようにしました。ここから地図をプレビュー表示したり、クリックしてGoogleマップのWebサイトにジャンプできます。

リスト名の日本語対応は、今年に入ってから?Twitterのリストアドレスに日本語が通るように変わっていたわけですが、今回これに対応しました。ただし、ツイート中に日本語リストのアドレスがあっても、リンクは英字部分だけの認識となります。ご了承ください。

NGワードの単語判定は、半角英数字に限り行うようにしました。(短いユーザ名などが意図しないNGを引き起こすため) ユーザ名やハッシュタグをNGワードに登録するとき、文字列の一部ではなく、すべてを入力するようにしてください。例えば、 #followme を入力しても #followmejp をNGにすることは出来ません。