記事一覧

プログラミンで遊んでみた

プログラミン

文部科学省SUGEEEEEE

作ってみた

続きを読む

画像ファイルドロップで壁紙変更

HTML5的な何か

FirefoxはHTML5のFile APIという、ローカルファイルのドラッグアンドドロップに関する仕様に対応しているそうです。

DnDと言えば伺か的には壁紙変更ですよね。そこでHTML5の技術とは無縁なUJUに試しに実装してみました。

ファイル 79-1.png

UJU - Ujura and Uju

Firefoxでのみ、ゴーストに画像ファイルDnDでWebページの背景が変更されます。(右下の青いボックスの中の「うじゅら＆うじゅう」でもお試し頂けます)

HTML5の練習

伺かゴースト更新フィードを改装しました。無駄にHTML5で書いてますが特に意味は無いです。

ちょっと前に書いたゴーストに関する投稿を表示するUserJSが動かなくなってしまうので、続けて使いたい場合はお手数ですが以下から更新をお願いします。

ゴーストに関するTwitterの投稿を表示するUserJS

何故か自分のサイトでグリモン

伺かゴースト更新フィードのゴーストの項目にマウスホバーすると @osusume_ukagaka の投稿をTwitter検索Twitter APIから取得して該当するものがあったら画面左上に表示するUserJSを書いてみました。

インストールは以下からどうぞ。

ファイル 73-1.png

Firefox, Opera, Google Chromeで動作します。(Webkitはダメ。Webkitでも無理矢理表示。ついでに立ち絵も。)

あとLDRizeに対応したので一緒に使うとj,kキーで上下にスクロール出来ていい感じかもです。

10/03/17 更新

  • 取得先をTwitter APIに変更。（取得件数：25件 → 200件）
  • Webkit系ブラウザで表示出来ないのを無理矢理表示するよう変更。ついでに立ち絵も。

ファイル 73-2.png

10/03/18 更新

  • ついでなので、右上にはてなハイクの投稿も表示してみた。

ファイル 73-3.png

CSS3で背景を重ねたりグラデーションしたり

CSS3が楽しい

WebkitのCSS3先行実装で複数の背景画像を指定したり、グラデーションとかも使えるらしいです。

練習を兼ねて、以前作った伺かゴースト更新フィードにシェル画像を表示してみました。

ファイル 72-1.png

SafariとGoogle Chromeでこんな感じに見えます。

ゴーストによって大きさがまちまちなので全体としてはイマイチですね。

Firefoxでも実装されているのですが画像のrepeat指定が上手く動かなかったので保留。Operaはよくわかんない。

やっぱやめた (10/03/14)

マウスホバーしたときに画面左右に立ち絵を表示する方がいいですね。これならサーフィスが見切れることも無いですし、Webkitに限らずIE6以外ならCSSだけで表示出来ます。

ファイル 72-2.png

…と思ったら今度はWebkitだけ表示出来ず。Webkitのバグっぽいですね(´・ω・｀)

Opera/10.50にアップデートした

ぱっと触った感じの印象などを。

  • CSS3の transition, border-radius, box-shadow などがサポートされてる
  • JavaScriptの JSON がサポートされてる、右クリックが拾える

というわけで、OperaもCSS3の恩恵に与れるようになったのでUserJSを更新。

右クリックでオーナードローメニューが出せるようになったのは大きいですね。

ブラウザゲームにUserJSでアバターを表示させてみる

文化英雄譚

LRさんがブラウザゲームを作ったみたいです。アトリエシリーズを彷彿とさせるアイテム作製ゲームとなっています。

なかなか楽しいのでみなさんもぜひどうぞ。

ありがちな問題点

いちいちサーバと通信するので反応が遅いですね。Webアプリの宿命なんでしょうけれどもあまり快適とは言えません。しかもメニューの階層が深いので目的のページにたどり着くまで３回以上も画面遷移を経ないといけなかったりしてかったるいです。ユーザビリティにもう少し工夫があるといいなと感じたので、リンクのショートカット機能をウチのUserJSゴーストに持たせてみました。

ファイル 69-1.png

目的の操作画面まで一回の画面遷移で行けるように。３回も４回もHTTPリクエスト投げてその度にデータベース参照してとかやってたらユーザにとってもストレスフルですしサーバの負荷も大変だと思うので、お互いに有益なのではないかと思います。

おまけで余計な反応も仕込んでみました。

ファイル 69-2.png

インストールは以下からどうぞ。

思いついたこととか

JavaScriptで動くゴーストは他にもいらっしゃるわけで、自分のWebサイトの案内役的なマスコットとして設置する活用例が考えられます。一方、UserJSで別のサイトに連れ回して何かする活用例というものを今まで思いつかなかったのですが、こんな風にイベント通知に使えるんじゃないかなどと考えました。

伺かにもSSTPサーバとして外部アプリケーションからの通知を再生する機能を備えていて、イベント通知アプリとしての側面も持っています。Webサイト側からの何かしらの通知を受け取って（あるいはSSTPライクなプロトコルをそのまま受信・解釈して）再生できれば、例えばWebゲームのアバターとして、ゲームを操作するUIそのものに応用出来るんじゃないかとこれを作りながら考えたりしました。

本当は画面に出ているキャラクタイメージをそのまま使いたかったのですが、透過されていなかったので今回は見送りです。もちろんWebゲーム側から特別な通知が来ているわけではなく、こちらが勝手に文字列を拾っているわけですが、何か一般的な通知の仕様が策定されて別のWebゲームにも使われるようになったら素敵ですね。同じアバターで別々のゲームが楽しめる、みたいな。

うじゅうジェネレータver1.0.2

UJU ver1.0.2

インラインフレーム全てにマテリアライズしてしまう不具合修正などしたのでUJUをver1.0.2に。
併せてびーふれんずのUserJSも更新しました。

うじゅうジェネレータver1.0.2

昨年からずっと放置していたうじゅうジェネレータもver1.0.2に追いつきました。
作成環境としてはショボイのでもう少しどうにかしたいところです。

「びーふれんず」をUserJS化してみた

このサイトで配布中のゴースト「びーふれんず」をUserJS化してみました。
例によって右下の青いボックスにマウスホバーすると起動するゴーストを選択出来ます。
聞きかじった知識でUserJS間の通信を実践してみました。
Firefox, Safari, Google Chromeで右クリックメニューから「ゴースト切り替え」「ゴースト呼び出し」が出来ます。(Opera、IEは仕様的に無理)
既に設置済の「うじゅら＆うじゅう」もアップデートしました。

入手先

追記

ブラウザ版Apricotが出てますね。

別に対抗意識とか燃やしてるわけじゃないですけど、ウチのUserJSは、下記のようなコードをHTMLの<head></head>内に書くことでお持ちのブログに自由に貼ることもできます。

<script type="text/javascript" src="http://home.384.jp/evidence/js/ujurauju.js" charset="utf-8"></script>

Webページ設置も出来るように作ってありますので。

ページを開いたらすぐ起動して欲しい場合は(ソースをDLして自前で設置する必要がありますが)ソースの上の方にある"bootAfterPageLoad: false"って書かれてるところを"bootAfterPageLoad: true"に変えるだけです。

このへんのドキュメントも配布ページにまとめておかないといけないですね。

2010年あけましておめでとうございます

賀正

あけましておめでとうございます。
今年もよろしくお願い申し上げます。

今日は特に何も無いです。新年のご挨拶だけ。

抱負とか

去年の抱負を見てみたらSAORI作るとか書いてましたけど、そんな気配すらない一年でしたね。ダメすぎる。

今年はあまり高望みをせずに、自分に出来ることをやっていこうと思います。

出来ることを増やすのは良いことですし、スキルを磨いたりアウトプットを増やすことも大切ですが、ちょっと一休みをして。
面白い物語を読んだり、可愛いイラストを眺めたり、美味しいものを食べたり、ためになる話を聴いたり、自分と違う価値観に触れる機会が増えたりしたらいいなと思います。

皆様にとっても良い一年でありますように。

ページ移動