MicrojsでJavaScriptのソースコードリーディング

Microjs CodeReading Bookmarkletとは

http://microjs.com にリストされているJavaScriptライブラリのソースコードリーディングを支援するブックマークレットです。Read/Unread状況、Readサイズ/合計コードサイズを把握できるので、ソースコードリーディングでちょっとした達成感を味わえます。ブックマークレットは http://let.hatelabo.jp/ を利用して公開しています。

Microjsとは Microjsは、数百バイト〜数キロバイトの小さなJavaScriptフレームワークやライブラリを集めて紹介しているサイトです。2012/01/09時点で154個、合計206.7kBのライブラリがリストされています。小さいものに限定されているので、短時間で読めるものがほとんどです。Backbone.js, Zepto, yepnope, Modernizrなど、JavaScript, CSS3, HTML5に興味のある方は一度は見聞きしたことがあるものが並んでると思います。 インストール方法 Hatena::Letのブックマークレット公開ページからブックマークレットをブックマークに追加します。 http://let.hatelabo.jp/shoito/let/gYC-xZiazbHnRw

使用方法

1. http://microjs.com にアクセスします。

2. ブックマークをクリックし、ブックマークレットを実行します。

    実行すると下図のように、どのライブラリがRead/Unreadなのか、どの程度のコードを読んだのかが表示されます。

注意 ソースコードリーディングの履歴はWeb Storageを利用してブラウザに保存していますので、別ブラウザ/別マシンを使用した際に履歴は引き継がれません。 ソースコード https://github.com/shoito/bookmarklet/tree/master/microjs

フィードバック

感想、要望、不具合などありましたら @shoito へツイートいただけると嬉しいです。

Web Storage APIを別空間から使ってみる - HTML5 Adv

12月20日のHTML5 Advent Calendar担当の@shoitoです。

今回は、以前にも本ブログで軽く紹介したことがある、Web Storage APIをFlash側と共有する簡単な方法について紹介します。業務でHTML5(File APIやWeb Storage, Application Cache...)以外にも、Flash/Flexもまだ現役で使用中(主にメンテ)なので、その両方に関係するネタを扱うことにしました。

ページの一部にFlashが埋め込まれているようなページで、HTML部分とFlash部分の共有ストレージ領域を設けられないかと思って、Web Storage APIに今回白羽の矢が立ちました。

多くのブラウザで利用できるAPIであることが大事ですので、Web Storage APIについて確認してみると、IE6, 7以外のほとんどのブラウザで使えることがわかります。

イメージ的には下記のようになりますが、Web Storage APIはもちろんJavaScript APIなので、ページ内のJavaScriptから簡単に扱えます。しかし、Flash側からWeb Storageのストレージ領域にアクセスするAPIがありません。そこでActionScriptでWeb Storage APIを実装します。青の矢印部分。

まず、ActionScriptのAPIを実装するために、W3Cで公開されているWeb Storage API仕様を確認すると、引数、戻り値の方は基本的にvoidかDOMStringなので扱いやすそうです。

Web Storage API自体シンプルなので、メソッドの数も多くはありません。なお、Local StorageとSession Storageはインターフェースは同じで、スコープが違うだけです。

次に、実装に用いるflash.external.ExternalInterfaceクラスのリファレンスに目を通すと下記のように説明されています。

ActionScript から、HTML ページに対して次のことを実行できます。

• 任意の JavaScript 関数を呼び出す 
• 引数の数を名前と共に渡す 
• ブール（Boolean）、数値（Number）、ストリング（String）などの各種データ型を渡す 
• JavaScript 関数からの戻り値を受け取る 

HTML ページの JavaScript から、次のことを実行できます。

• ActionScript 関数を呼び出す
• 標準の関数呼び出しの表記法を使用して、引数を渡す
• JavaScript 関数に値を戻す

注目すべき点を太字にしましたが、ExternalInterfaceを利用することで、ActionScriptからJavaScript APIを利用できることが分かります。下記のようなイメージになります。

これに着目して、実装したActionScript APIが下記になります。

package com.google.code.as3webstorage {
    import flash.external.ExternalInterface;

    public class LocalStorage {
        public static function length():uint {
            return ExternalInterface.call("function() { return localStorage.length; }");
        }

        public static function key(index:uint):* {
            return ExternalInterface.call("localStorage.key", index);
        }

        public static function getItem(key:String):* {
            return ExternalInterface.call("localStorage.getItem", key);
        }

        public static function setItem(key:String, data:*):void {
            ExternalInterface.call("localStorage.setItem", key, data);
        }

        public static function removeItem(key:String):void {
            ExternalInterface.call("localStorage.removeItem", key);
        }

        public static function clear():void {
            ExternalInterface.call("localStorage.clear");
        }
       
        public static function available():Boolean {
            return ExternalInterface.available && ExternalInterface.call("function() { return typeof localStorage != 'undefined'; }");
        }
       
        public static function addStorageEventListener(func:Function, useCapture:Boolean = false):void {
            ExternalInterface.call("as3webstorage.assignSwf", ExternalInterface.objectID);
            ExternalInterface.addCallback("callbackToAs", func);
            ExternalInterface.call("as3webstorage.addStorageEventListener", "callbackToAs", useCapture);
        }
    }
}

ActionScriptに見慣れていない方には分かりにくいと思います。

どういうことをしているかと言うと、getItem()やsetItem()など各メソッドの中で、JavaScriptによるWeb Storage API実装を呼ぶようにしています(ラップしているだけ)。
call()メソッドの第一引数にJavaScriptコードの文字列表現、第二引数に各Web Storage APIに渡す引数を指定しています。こうすることで、ExternalInterfaceを通して、JavaScript ＜---＞ ActionScript連携が実現できます。しかし、これだけだとWeb Storage APIのStorageイベントを扱うことができません。

そこで、addStorageEventListener()用のコールバックをJavaScript側に実装します。

(function() {
    if (this.as3webstorage) return;
   
    var as3webstorage = this.as3webstorage = {
        swf: null,
       
        assignSwf: function(swfId) {
            this.swf = document.all ? window[swfId] : document[swfId];
        },

        addStorageEventListener: function(callback, useCapture) {
            window.addEventListener("storage", function(event) {
                var returnObject = {
                    "key": event.key,
                    "oldValue": event.oldValue,
                    "newValue": event.newValue,
                    "uri": event.uri,
                    "source": undefined,
                    "storageArea": undefined
                };

                as3webstorage.toNativeFunc(as3webstorage.swf, callback).apply(null, [returnObject]);
            }, useCapture);
        },
       
        toNativeFunc: function(obj, functionName) {
            return function() {
                var parameters = [];
                for(var i = 0; i < arguments.length; i++) {
                    parameters[i] = "_" + i;
                }
               
                return Function(
                    parameters.join(','),
                    'this["' + functionName + '"](' + parameters.join(',') + ')'
                ).apply(obj, arguments);
            };
        }
    };
})();

サンプルを作ったので下記で試せます。
http://dl.dropbox.com/u/227786/code/flex/as3webstorage/as3localstorage.html

本当にWeb Storageが使われているかはデベロッパーツールなどを使って確認してください。

ExternalInterfaceでJavaScript ＜---＞ ActionScript間のデータ交換はXML形式で行われるので、オブジェクトによってはデシリアライズできないものもあります。
そのため、シンプルなインターフェースなら今回のように実装することが可能なのですが、Indexed Database APIのような複雑なものだと難しそうです。

あ、これって誰得？ActionScriptの話が多くない？という感じで終わってすいません。
HTML5 Advent Calendar 2011はまだ続きますのでお楽しみに。

関連記事

Flash + HTML 5 : Offline Flash Apps using DataStore API
http://blog.flexgeek.in/2010/05/flash-html-5-offline-flash-apps-using-datastore-api/ 

HTML5 Web Storage APIをFlash/Flexから使う - as3webstorage
http://blog.air-life.net/2010/06/as3webstorage.html 

HTML5 Geolocation APIをFlash/Flexから使う - as3geolocation
http://blog.air-life.net/2010/06/as3geolocation.html

UPGRADE JAPAN!!で話してきた | HTML5時代の技術の恩恵を受けるには

HTML5時代の技術の恩恵を受けるには

View more presentations from Sho Ito

HTML5時代の技術、その恩恵を受けるにはどうすれば良いのか15分という短い時間ですが紹介させていただきました。
難しい内容もあったかもしれませんが、聞いてくださった皆さんが少しでもHTML5に興味を持って、調べたり、実際に使うきっかけになると嬉しいです。

HTML5やCSS3など、新しい技術を使おうにもInternet Explorer 6, 7, 8などの非モダンブラウザのことを考えると使用するのを躊躇してしまう現場もあると思います。
そんな現場でもHTML5やCSS3の利用を支援してくれるライブラリ群(Polyfill)をいくつか紹介しました。


※6/8(水)追記： セッションの内容を補完してくれる記事が本日公開されていました。

HTML5&CSS3入門 with HTML5 パック 第6回 Graceful DegradationとPolyfill
by 小山田 晃浩さん
http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html

※6/9(木)追記： セッション中に省略したGraceful Degradation, Regressive Enhancement, Progressive Enhancementについての参考にどうぞ。

第16回HTML5とか勉強会 Progressive Enhancement
by 羽田野 太巳さん
http://www.html5.jp/blog/?p=503

HTML5時代のWeb技術について勉強会をやります - 福井

11/27(土) HTML5などなど次世代Web勉強会 in 福井

HTML5やCSS3、SVG、関連APIなどをテーマに「講演」や「自作サービス/アプリのデモ＆裏側を解説」というスタイルの勉強会を開催します。

Mozilla Japanのdynamis(@dynamitter)さんにFirefox4と次世代Web技術についてのお話、Firefox for Androidのデモをしていただけることになりました。
Firefox, ThunderbirdなどMozillaのソフトウェアにお世話になっている皆さん、日頃の感謝、要望などを直接お伝えできるチャンスです。

イベントのターゲットは初心者、開発者、デザイナー問わずになっておりますのでお気軽にご参加ください。
クリエイターに直接質問できる良い機会になると思います。

イベント受付ページ
http://kokucheese.com/event/index/5492/

日時： 2010年11月27日 13:30 - 17:30
定員： 30名
会場： 福井県鯖江市新横江2-3-4 めがね会館7F 株式会社jig.jp 会議室
最寄り駅： JR鯖江駅

[開催プログラム]
* 13:00 - 13:30 開場、準備
* 13:30 - 13:35 オープニング
* 13:40 - 14:30 Firefox4で見るHTML5時代のWeb技術 by Mozilla Japan @dynamitter
* 14:30 - 15:30 W3C総会レポート＆使おうSVG by @rch850
-- 休憩10分 --
* 15:30 - 17:20 サービス/アプリのデモ＆解説

デザイナーがつくるHTML5アプリ（仮） by @shirokuro331
利用技術: Canvas

Canvasでアニメーションしてみたよ（仮） by @taiju
利用技術: Canvas

twistmap(仮) by @mirutover
利用技術: WebSocket(socket.io), node.js

クイズアプリ(仮) by @tkmsm
利用技術: WebSocket, Scala

HTML5で始めるお気楽プログラミング(仮) by @aroma_black
利用技術: Web Storage, Offline Web Applications, CSS3, (Flask@Python), Widgets

Firefox for Android by Mozilla Japan dynamis(@dynamitter)

* 17:20 - 17:30 クロージング
* 18:00 - 20:00 懇親会 (秋吉 鯖江店)

HTML5 Geolocation APIをFlash/Flexから使う - as3geolocation

前回の記事のas3webstorageに続き、Geolocation APIをFlash/Flexから利用できるようなシンプルなユーティリティを作ったので、それをGoogle Code Hostingで公開しました。

as3geolocation
https://github.com/shoito/as3geolocation

サンプルはこちらになります。HTML5 Geolocation APIをサポートしているChromeやFirefoxなどから確認してください。
Geolocation APIのサンプル


作りとしては、as3webstorageと同様にActionScriptのExternalInterfaceクラスを利用して、Geolocation API(JavaScript)をラップしてActionScriptから呼んでる"だけ"です。

※Safari5でGeolocation APIが実装されてるのですが、as3geolocationではExternalInterfaceとの絡みで上手く動いてません...orz
※Geolocation APIはHTML5仕様には含まれてません。

HTML5 Web Storage APIをFlash/Flexから使う - as3webstorage

以前、Web Storage APIをFlash/Flexから利用できるようなシンプルなユーティリティを作っていたので、それをGoogle Code Hostingで公開しました。

as3webstorage
https://github.com/shoito/as3webstorage/

6/2(水)に開催した「HTML5、おまけにiPadをネタにワイワイガヤガヤ in 福井」でタネ明かししたやつです。
サンプルはこちらになります。ストレージに格納されてるかどうかはChromeブラウザのデベロッパーツールなどから確認してください。
LocalStorageのサンプル
SessionStorageのサンプル


作りとしては、ActionScriptのExternalInterfaceクラスを利用して、Web Storage API(JavaScript)をラップしてActionScriptから呼んでる"だけ"です。
LocalStorageクラスとSessionStorageクラスしかなくて、そんだけ？っていう感じのユーティリティになってます。

先日公開された「Web SQL DatabaseをFlashから使う」という海外のブログ記事を見たのが公開のキッカケになりました。
=> Flash + HTML 5 : Offline Flash Apps using DataStore API


HTML5 vs Flashっていう視点で一部では見られてるけど、Flash/FlexとHTML5の両方に興味があって追っている私としては、別にFlashとHTML5を無理にvsな関係で捉えなくてもイイんじゃないかなと思っています。

HTML5関連API(HTML5仕様ではないJavaScript API群)については、完全にではありませんがFlash(ActionScript)からも利用できますしね。
ちなみに、FlexのHistoryManagerやディープリンキング(パーマリンク)はActionScriptとJavaScriptとが密に連携して実現していますよ。


HTML5関連APIにはWeb Storage API, Geolocation API, Indexed database API, ....と多々あります。
HTML5について詳しくは↓この辺で一緒に学びませんか？
html5-developers-jp
html5-fit

※Web Storage APIはHTML5仕様には含まれてません。

※2010/06/18 追記 - MOONGIFTで紹介していただきました。感謝。
ActionScript3向けのWebストレージライブラリ「as3webstorage」
http://www.moongift.jp/2010/06/as3webstorage/

ReverseIt! - Chrome Extensionsを作りました

今日の昼休みに @mitukiiiのこのつぶやきを見たのをきっかけに、ランチ前の時間を使ってChrome Extensions、ReverseIt!を作ってみました。
昨夜、Chrome Extensions with HTML5作ろう会 in 福井 を開催したので、復習がてらちょうど良かったです。

ReverseIt!を試してみようという奇特な方はChromeブラウザから以下のリンクをクリックして、Chrome拡張(Extensions)をダウンロードしてください。

ダウンロード： http://f.air-life.net/crx/ReverseIt.crx

インストールされるとアドレスバーの右側に以下のような青い四角に"R"と描かれたボタンが追加されます。

後は、適当なWebページを開いてポチっとそのボタンを押していただくと、ページが反転します。...それだけです。


しょーもないChrome Extensionsを作りましたが、4/17(土), 4/24(土)に「Google Hackathon for Chrome Extensions in 福井」が開催されるので、そこではもっとまともなモノを作ります。一緒にChrome Extensionsを作りませんか？
Chrome ExtensionsはChromeブラウザで扱えるHTML5(関連)やCSS3の機能も使えるので楽しめますよ。

Google Hackathon for Chrome Extensions in 福井 - 4/17, 4/24(土)
http://groups.google.co.jp/group/hokuriku_engineer/web/ghfukui-vol02

ネタ元

ギズモードのデザイナーが語る！ エイプリルフールの裏側
http://www.gizmodo.jp/2010/04/post_6958.html

！ルーフルリプイエは日今
http://www.gizmodo.jp/2010/04/april.html

ソースコード
ざっくり説明すると、“R”ボタンを押されたときにGIZMODEで紹介されていた反転用のCSSを現在開いているページに適用するだけです。
manifest.json

{
"background_page": "background.html",
"browser_action": {
"default_icon": "icon48.png",
"default_title": "ReverseIt!"
},
"icons": { "48": "icon48.png",
"128": "icon128.png" },
"description": "GIZMODEの2010年エイプリルフールネタを現在開いてるページに適用する。 http://www.gizmodo.jp/2010/04/post_6958.html",
"name": "ReverseIt!",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"version": "0.2"
}

background.html

<html>
<head>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.insertCSS(tab.id, {file:"reverse.css"}, null);
});
</script>
</head>
</html>

reverse.css

body{
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}

icon48.png, icon128.png

Chrome Extensions with HTML5作ろう会 Vol.1 - 福井やります

HTML5のスピーカー/オーディエンス型の勉強会は何度かやってきたので、そろそろみんなで手を動かしても良い時期ですよね。
というわけで、4/7(水) 19:00から「Chrome Extensions with HTML5作ろう会 Vol.1 - 福井」というイベントをやります。

4/17(土), 4/24(土)には、京都GTUGと連携して、福井で2度目のGoogle Hackathon for Chrome Extensionsを開催いたしますので、予習にはもってこいです。
http://groups.google.co.jp/group/hokuriku_engineer/web/ghfukui-vol02

ATND参加申し込みページ
http://atnd.org/events/3852

■イベント概要
Google Chrome拡張(Extensions)をテーマに集って、Chrome拡張がどんなものなのか、
どうやって作るのかを学び、実際に手を動かして作るイベントです。

Chrome拡張って何？という段階から進めるので、学生や初心者の方も安心してお気軽にご参加ください。

『Chrome拡張(Extensions)って何ですか？』
Google Chrome(Chromium)ブラウザを拡張できる機能、Firefoxのアドオンに相当するものです。
Chromeでは、一般的なWebサイトと同様にJavaScript/HTML/CSSを用いて拡張機能を開発することができます。
また、ChromeがサポートしてるHTML5/CSS3の機能、また関連APIを使うことも可能です。

現在、2000個以上の拡張機能がGoogleのギャラリーで公開されています。

日時：2010/04/07(水) 19:00～21:00
定員：10名
参加費：無料
準備：ノートPC, MacBook等場所：(株)サーフボード 1階会議室
住所：〒910-0842 福井県福井市開発2丁目614
最寄駅：えちぜん鉄道勝山永平寺線「越前開発駅」徒歩5分
地図： http://www.surfboard.jp/profile/map_fukui.asp
駐車場： 会場横のうなぎやさんの駐車場をお使いください

内容：
1. Chrome Extensionsの紹介 (15分程度)
2. Chrome Extensionsの作り方の解説 (15分程度)
3. みんなでChrome Extensionsを作って動かしてみる (時間の許す限り)

WCAFセミナーにて、HTML5勉強会を福井でVol.2

3/12(金)に福井で「次世代ウェブを学ぶ、HTML5勉強会＠めがね会館」を開催しましたが、3/20(土)にWCAF Seminar Vol.3がありまして、その中でもHTML5のお話をさせていただきます。

WCAF Seminar Vol.3
日時：2010年3月20日(土) 13:30開始(13:00〜受付)〜17:00終了(交流会込)
場所：福井県福井市手寄1丁目 AOSSA 607研修室
参加費：500円(場所代とおかし代)
定員：30名
申し込み：こちらから

・『コミュニケーションの視点から考える
Graphic designerのweb design』(45分) @bun__

Graphic designとWeb designを行き来しながら日々仕事で考えてい
る事。コミュニケーションの視点から考える双方媒体の得手不得手
や、現場から見る違い、クライアントに関わる時に必要なデザイン
という考え方を1つの案件を追いながらお話しします。

・『ぎゅ〜っと濃縮、HTML5』(45分) @shoito

開発者の視点から、現在仕様策定中のWeb標準技術であるHTML5、
JavaScript APIについて紹介します。新たに追加される要素群、
アプリケーションプラットフォームとして重要な機能を担う
File API、 Geolocation、Web Workers、Web Storage...etc
まで、デモを交えて解説します。HTML5を使うためのTipsも。

・交流会
交流会セミナーと同じ部屋で、
ノンアルコールでお菓子をつまみながら情報交換など。

HTML5勉強会を福井でVol.1

3/12にjig.jpにて「次世代ウェブを学ぶ、HTML5勉強会＠めがね会館」が開催されました。

名称：HTML5勉強会＠めがね会館
内容：HTML5講義、HTML5お試しワークショップ＆発表会
場所：福井県鯖江市新横江2-3-4 めがね会館 7階 jig.jp（駐車場有）
日時：2010/3/12(金) 17:30 OPEN、18:00～21:00
定員：30名
http://fukuno.exblog.jp/12219692/

セッションとしては大きく分けて4本行いました。
1. ぎゅ～と濃縮、HTML5 @shoito (私)
2. HTML5を書いて動かすよ @rch850
3. ミニセッション @taisukef
4. HTML5min Ideathon @全員

1. ぎゅ～と濃縮、HTML5 @shoito (私)
HTML5と関連する仕様について、ぎゅっと詰めてサイト,ツール,Webアプリも合わせて紹介しました。
これは3/20(土)のWCAF Seminar Vol.3にVer. 2をお話させていただくことになっています。
興味のある方、是非いらしてください。

2. HTML5を書いて動かすよ @rch850
前のセッションとは違い、じっくりと動くものとそのソースコードを眺めながらのセッションでした。
やっぱり、深く理解するにはソースコードを読むのが一番ですね。

3. ミニセッション @taisukef
5分という短い時間で、HTML4、HTML5、スマートフォンアプリの話をしてくれました。
android 1.xはHTML5サポートがイマイチ、2.xはイケてる。Xperiaは1.6なのが残念！

4. HTML5min Ideathon @全員
私としては、これが一番楽しかったです。
近くの席の参加者と、HTML5と関連API(実装されていないものも含む)を使って
作ってみたいサイト/アプリのアイデアを5分で考え、30秒の時間内で発表するというものでした。

参加者が勉強会で理解したHTML5の知識をどう活かそうとするのか聞ける良い時間でした。
なお、アイデアソン優勝チームには書籍「HTML5&API入門」が贈呈されました(私物でしたが勢いで...)。
お願いですから一通り読んでくださいねw

他の参加レポート
html5勉強会in福井まとめ記事 @itsuki_kosen
http://d.hatena.ne.jp/itsuki_kosen/20100312/

[勉強会]HTML5勉強会に参加してきました。@shirokuro331
http://shirokuro331.net/wordpress/?p=457

当日のtwitter上での発言はハッシュタグ: #291html5でご覧いただけます。
http://twitter.com/#search?q=%23291html5

2010/03/22 追記

ぎゅ〜っと濃縮、HTML5

View more presentations from Sho Ito.

HTML5-FIT ~北陸のHTML5コミュニティ~

東京へは頻繁に行けない！北陸(福井、石川、富山)に住んでいても、HTML5や関連APIの勉強、情報共有をしていきたい！
という人たちのためのコミュニティを作りました。
もちろん、北陸以外の方の参加もWelcomeです。

去年まで、北陸でもHTML5関連のセッションが含まれた勉強会が何度か行われてきました。
今年はその活動を皆でさらに活発にしていきませんか？


HTML5-FIT(北陸)

FIT(フィット) は Fukui, Ishikawa, Toyamaのイニシャルを表しています。
FITが「調和」「適合」というイイ意味だったので、この並びにしました。

YouTube HTML5 Video Playerを試してみた

YouTubeでYouTube HTML5 Video Playerのベータ版が公開されました。
以前からHTML5を使用したデモページが公開されていたのですが、ついにHTML5 ベータ版の登場です。

HTML5ベータ版への切り替え方法は、下記のURLにアクセスし、画面下方にある"HTML5 ベータ版を有効にする" リンクをクリックするだけ。
http://www.youtube.com/html5


あとは、いつものようにYouTubeにアクセスして観たい動画を再生するだけ。
いつもの見た目でプレイヤーだけがこっそりとHTML5のVideoタグを利用したものに切り替わっています。

ロード画面 - 中央に HTML5 であることを表示

再生中

HTML5, XHTML2, HTML4, XHTML1の関係を理解するには

HTML5, XHTML2, HTML4, XHTML1の関係について知りたいときは、まずこれを読もう。
とても読み易い訳になってます。オススメ。

「異なる技術に、同じような名前がついていたのが問題」 ← うんうん。

日本語 - (株)ミツエーリンクス訳
http://standards.mitsue.co.jp/resources/mm_comic/

原文
http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/

ソース
html5-developers-jp - コミックで学ぶ HTML5
http://groups.google.co.jp/group/html5-developers-jp/browse_thread/thread/eb2978b85cf690b8