ラベル HTML5 の投稿を表示しています。すべての投稿を表示

2013年12月9日月曜日

facebook シェアボタン設置まとめ 2013 12月

1.<html>に以下のコードを入れる。
（html5バージョン、何故入れるかは忘れました。）

2.ogpを設定する。
（※アプリIDが無くても動きますがアプリIDを取得するとfacebookアプリのインサイトで情報が見れるようになります。アナリティクス的に調べることが出来る。）

3.facebook開発者ツールでサイトURLを入れて以下の2つのコードを
取得する。
https://developers.facebook.com/docs/plugins/share-button/

・facebook SDK※アプリIDなしバージョン（<body>直下に置く）

・facebookボタンのリンク（ボタンを置きたい好きな場所に置く）

4.htmlに<ul><li>などで並べる。無理な時は<table>レイアウトにする。

5.IE8以下対策、現在のシェアボタンのコードはhtml5用でIE8に対応していないので
条件分岐させてIE8以下用のコードを用意する。

<table id="sns_btn_box">
<tr>
<td><p class="fb-share-button" data-href="サイトURL" data-type="button_count">
</p>
</td>
<td><a href="https://twitter.com/share" class="twitter-share-button" data-url="サイトURL" data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td>
</tr>
</table>

6.シェアした時の画像はpngでないと荒れる。
画像の大きさは公式では1500×1500とか
みたいですが、スマホ用でシェアした時の最大サイズが500いくつだったので600px×600pxで用意すればバッチリなはず。

<参考URL>

2013年4月22日月曜日

flash(swf)をSVGに変換してくれるツール「Swiffy」開発元：Google

Swiffyの使い方

Google SwiffyのサイトにSWFをアップロードして変換

Google Swiffyサイト左下にあるボタンからHTML5に変換したいSWFをアップロードする
アップロードが完了すると「Swiffy output」と表示され、HTML5に変換されたhtmlのリンクが表示される
変換されたhtmlファイルをリンク先から取得する（リンクは１５分で期限切れになる）

Adobe FLASH CS4以降の拡張機能を使って変換

Google Swiffyサイト右上にあるボタンからExtensionをダウンロードして、インストールする（ダウンロードして、ファイルを実行するとインストールが開始される）
Swiffyで表示させるflaファイルを開く
「コマンド」から「Export as HTML5 (Swiffy)」を選択すると、HTML5のファイルが出力される

<注意点>
iOSではFLASH(swf)が非表示、Android2.x以前ではSwiffy(SVG)が非表示になります。
Canvasアニメーションに関しては、チューニング次第でパフォーマンス改善しそう(少し重い)です。

<画面を拡大した時の比較>
・SVG(Swiffy)

・Canvas

・Flash(swf)

＜参考サイト＞
msto.jp - Google Swiffy 覚書
http://msto.jp/p/6/

2013年4月3日水曜日

HTML5 Canvasを使ってローディング用のアニメーションを作成する「sonic」

参考サイト：[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator

2013年1月5日土曜日

html5のcanvas＋JSで描画する勉強サイトまとめ

・HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！

・HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ

・『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎

・Canvasリファレンス

・まだまだ間に合うCanvasでアニメーション入門（まとめ実践）

・Canvasで実現するカラフルな円が小さくなったり大きくなったりする背景

2011年12月1日木曜日

JWplayer各種ブラウザ対応の動画再生player

mp4だけでflashplayerがインストールされていればどのブラウザでも表示出来る
JWplayer

(1)インストール
http://www.longtailvideo.com/players/jw-flv-player/

Keep me informed of news, offers & updatesと
Include Viral, a video sharing plugin のチェックは外す。
(インフォメーションが届かないようにするのと再生後にシェアするなどの項目を出さないようにする。)

(2)カスタマイズする。
file:動画のパス;
skin:スキンの場所;

(例)
<script type="text/javascript" src="jwplayer.js"></script>
    <script type="text/javascript">
        jwplayer("mediaplayer").setup({
            flashplayer: "player.swf",
            file: "video_01.mp4",
            skin: "nacht.zip"
        });
    </script>

(3)その他の設定は以下URLから

スキンは以下からダウンロードしてzipのまま好きなの場所に上げる。
http://www.longtailvideo.com/addons/skins

JW FLV Media Player のオプションの一覧
http://kenknown.blog42.fc2.com/blog-entry-54.html

他に役立つかもしれない
http://dmoon.at.webry.info/201011/article_18.html

2011年11月29日火曜日

(メモ)html5 動画再生について

全ての再生環境に適応させる為には動画の形式が今のところ3つ必要。

h.264 (safari、IE)
WEB-M (Chrome)
.ogg(firefox、opera)

動画プレーヤーのプラグイン
videojs

実装例
http://codingmania.net/contents/213.html

その他
html5を始める下地として使えるサンプルコード
http://css-happylife.com/archives/2010/0609_1305.php