Home > Tags > javascript

javascript

FF14CDB ver:3.2.1アップデート パッチ2.2対応

ゲームの方ではパッチ2.2が実装されましたね。くっ・・・自分もリテイナー育てたい・・

FF14CDBでもパッチ2.2のアイテムデータを反映させました
あと、コンテンツファインダーで行くダンジョンマップを削除しました。
ソロで気軽にマップデータを調査できたらいいんですが・・・。ダンジョンに入るのに最低4人いないとできないので断念しました。
高Lvだと8人でしたっけ。将来16人とか実装されたら手が出ないですし、助っ人頼むにしても自キャラをそこまで育てるのが難しいので・・・。
通常フィールドは現在elemenさんから拝借しているんですが、近いうちに差し替えます。

あともうひとつ、fateリストの実装を取りやめました。
実装するには時間がかかるのと、fateリストがあっても有効活用できなさそうなので断念しました。
手帳になってエオルゼアデータベースに実装されるといいんですけどね。

もう4月か・・・

 

 

インストールは自己責任でお願いします↓
https://chrome.google.com/webstore/detail/ff14cdb/ojckpedbjefgemkhoobpaaaakocaaipk?hl=ja

『これからやりたいこと』

  • 地図データの保管
  •  モンスターの座標データ作成
  • オプションページの作成
  •  表示ページの作成
  •  デザインページの作成
  • お気に入りリスト
  • クラフトシミュレータ

『version』

3.2.1:パッチ2.2反映、製作レシピ一覧実装、各アイテムの詳細画面実装、fateリスト削除、ダンジョンマップ削除
3.1.3:アイコンの作成
3.1.1:公開

chrome拡張機能 非公式FF14データベースアプリ-FF14CDB-公開

さてさて、久しぶりの更新です。
前の記事で書いていた「胃袋のちょっと上辺りまで出掛かっているネタ」がついに出てきました。といっても喉の奥から少し見えてきたぐらいですが。
そのネタとは国産MMORPG『新生FF14』の攻略アプリです。 去年のうちに形になったものを公開する予定が、なんともう3月も終わりに・・・。
はい。製作とゲームの両立は無理でした・・・。 製作途中でメモリ節約のために大幅に作り変えたのも原因のひとつですが。
ちなみにFF14は楽しいですよ。いまの時代にあったMMOの形だと思います。
ただ、スクエニのFFブランドなんだから新しい事に挑戦してほしかったなぁとは思います。

んでもってアプリの話に戻しますが、これはchromeの拡張機能になります。名前を『FF14CDB』 よくあるゲーム攻略サイトを拡張機能にした物です。 まだまだ開発途中でして、現在の進行度は30%程です。 公式エオルゼアデータベースで見れる内容は網羅しているはずです。(ユーザーコメントと投稿画像を除く)
ただ情報を載せるだけでなく、その情報をユーザーがカスタマイズして使えるようにしようと考えています。
まだまだこんな状態で公開するのもあれなんですが、ちょっと気合を入れるためにも公開しようと思います。 よければ使ってみてください。

インストールは自己責任でお願いします↓
https://chrome.google.com/webstore/detail/ff14cdb/ojckpedbjefgemkhoobpaaaakocaaipk?hl=ja

『これからやりたいこと』

  • 地図データの保管
  •  モンスターの座標データ作成
  •  fateデータの作成
  • オプションページの作成
  •  表示ページの作成
  •  デザインページの作成
  • 製作手帳の作成
  • 討伐手帳の作成
  • お気に入りリスト
  • クラフトシミュレータ

『version』

3.1.1:公開

第8回:ビデオコントロールパネルの作成 ~ソース選択画面編~

できるうちにやっておこう・・・というのは、またちがうおはなし・・・

さて、今回はソース選択画面を作りました。
技術的に特に難しいところはなく、画像や角丸の部分はCSS3です。
とりあえずyoutubeにアップされている全部のソースを表示しています。html5videoはブラウザによって再生できるフォーマットがちがうので、対応していないのは打ち消し線を施しています。上の画像はFireFoxの場合。
ちょっとつまずいたところは、1:ブラウザの対応フォーマットを調べる

canPlayType

メソッドの戻り値がFireFoxとChromeでちがった事と、2:ソース切替後、途中から再生させようとしたときの2点。

1番目は、次のソースをFireFoxのfirebugとChromeのデベロッパーツールで試した場合、FireFoxは”probably”、Chromeは”"になった。(ちゃんとvideo要素作ってから試してね)

var video = document.getElementById("video");
video.canPlayType('video/webm;+codecs="vp8.0,+vorbis"')

どちらもWebMに対応しているはずだけど、;のコロン以降の邪魔な文字のあるなしで変わっているみたい。
‘video/webm’にするとChromeでも動く。FireFoxがおおちゃくしているのだろうか。

2番目は、video.srcでソースを設定して、video.load()して、video.play()と立て続けにするとエラーが出た。
loadした後に’loadedmetadata’というイベントを取得してからplayで解決した。
このvideo周りの仕様は、AS3と似ていて雰囲気がつかみやすい。
細かい見た目の部分はまたあとで修正予定。
次回はフルスクリーンモードの切替ボタンの実装。

 

第8回のブックマークレット
ブックマークに登録してyoutubeで動画を見ながらブックマーク起動。FireFoxとChrome対応。

【第6回】iframeをpostMessageで通信【javascriptだけで作るニコ風動画サイト】

iframeを1つにしてpostMessageでお互いに通信はできました。
postMessageはIE8でも使えるのでほっとしたものの、IE8はHTML5のvideoをサポートしていないんですね・・・。
となると動画の再生自体ができないので、IE8での実装は無理っぽいですね。
IE9ならvideoをサポートするそうですが、IE9はXPユーザーは使えないみたいですね。
ほんといっつも最後の砦でIEが待ち受けている感じw
さてさて、次回は動画プレーヤー機能の充実を実装予定。
ちょこっと調べたところvideo周りではHTML5の充実っぷりがすごいですね。
HTMLで文字を動かすにはマーキーを使ってたころに比べると驚き。

ブックマークレットのソース

javascript:(function (){

var siteArr = [
'http://www.youtube.com/watch?'
];
var c=siteArr.length;
for(var i=0;i<c;i++){
if(location.href.indexOf(siteArr[i]) == 0 ){
var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/06/get_params.js?"+new Date().getTime();
document.body.appendChild(s);
console.log('document.body.appendChild '+s.src);
break;
}
}

})()

youtubeで動画を見ながら起動してください。FireFoxとChrome対応。

第5回のブックマークレット

【第5回】iframe同士の連携と新たな問題点、あとタイトル改名【javascriptだけで作るニコ風動画サイト】

前回はiframeを2つ用意してました。動画プレーヤー用と@anywhere用。
@anywhere用のiframeをjQuery UIで自由にドラッグできたらいいなーと思っていたんですが、iframe上だとイベントがうまくいかないようだったので?諦めました。

そして今回は動画プレーヤーifrmaeの中に@anywhereのiframeを入れています。
そして@anywhere用の中に動画プレーヤーの再生・停止ボタンなどのコントロールパネルを設置しました。
この二つのiframeは別ページなのですが、同一ドメインなのでiframe越しでもjavascriptでアクセスできるというわけです。

新たな問題点とは、youtubeのサイトから動画プレーヤーiframeに値(動画URL)を渡す時に、ハッシュクエリー(location.hash)を使っているんですが、これをするとURLが長すぎてうまく動作しないような気がします。現状IEで作動しないのはこれのせいだと思います。
あとhashの値がブラウザによって変わるみたいですね。URIencode関係で。
次回はこのあたりをちょっと変えようと思います。

で、どう変えるかと言うとwindow.postMessageを試してみようと思います。
postMessageは新しい仕様なので躊躇していたんですが、IE8からいけるみたいですね。ならなんとかいけそう。
次回の課題はpostMessageを使って、IE・FireFox・Chromeで動作確認する事です。

ブックマークレットのソース

javascript:(function (){

var s=document.createElement("script");
s.charset="UTF-8";
s.src="http://hk-factory.sakura.ne.jp/testApi/minmiru/05/set_youtube.js";
document.body.appendChild(s);

})()

youtubeで動画を見ながら起動してください。FireFoxのみ。

第5回のブックマークレット

Home > Tags > javascript

twitter
リンク

Return to page top