記事一覧

HTML5の練習

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

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

NTCmanager更新

Shell,Balloon,Plugin,Headlineの更新も捕捉できるようになりました。

ファイル 74-1.png

伺かゴースト更新フィード

ゴーストに関する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のバグっぽいですね(´・ω・`)

里々で「らふらんす」を使う

華和梨向けのトークテストツール「らふらんす」

配布元

里々で「らふらんす」を使う

以下のコードを里々の辞書の何処かに記述するだけ。

@ShioriEcho
(R0)

ファイル 71-1.png

ゴーストを公開するときは記述を消してください。

セルフツッコミ

それ「さとりて」で出来るよ!

「らふらんす」がDSSTPを投げて、華和梨がそれを再生しているだけらしい、というので、里々でも対応コード入れれば動くよね、ってのを確認したかっただけの話です。

10/03/10 追記

対応コード入れなくても動くらしいですよ!いつの間に。

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

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

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

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

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

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

文化英雄譚

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

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

ありがちな問題点

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

ファイル 69-1.png

目的の操作画面まで一回の画面遷移で行けるように。3回も4回も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に追いつきました。
作成環境としてはショボイのでもう少しどうにかしたいところです。

SSP/2.02.19で狭くなったメニューを元に戻す

オーナードローメニューが狭くなった

昨日リリースされたSSP/2.02.19で Windows Vista / Windows 7 向けの改良が行われた模様です。
メイリオのフォント情報を読み取って行間を詰めたりしているようで、オーナードローメニューが以前より狭くなりました。
特に見づらいわけでもないですし慣れの問題だと思いますが、設定で行間を調整することも出来ます。

ファイル 67-1.png

行間の設定の方法

オーナードローメニューから、「設定」->「本体設定」->「表示」->「メニューの縦方向の余白設定」を「4」にする。

ファイル 67-2.png

これでおおよそ以前と同じくらいの行間になります。

ファイル 67-3.png

「びーふれんず」を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"に変えるだけです。

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