某イカゲームの公式サイトなどでやってる手法です。 同じ件に遭遇するだろう同士の為にサンプル含めてメモっておきます。 See the Pen YouTube Background by Tenderfeel (@Tenderfeel) on CodePen. サンプルをjsdo.itからCodePenに移動 利用するAPIは　YouTube IFrame API です。 この公式のサイトにAPIを利用して動画を表示するサンプルがあるんで、それを適当にコピペすれば基本的な表示はできる感じになってます。 以下からは段階を追って冒頭に載せたCodePenのソースを適当に解説しています。 公式のリファレンス見てもよく分かんないという方向けです。 2018年9月25日以降の挙動について 以下2点の大きな変更があり、YouTube動画を背景に設定して利用することは実質できなくなっています。 showin

jQueryではもうｱｶﾝと思った時に挙った乗り換え候補はRiot.jsとMithril.js。 どっちもナウいんで一応両方試してみたんだけども、Riot.jsに落ち着いた感じであります。 なんでRiot.jsになったかというと、完全に個人的な好みの問題でして、 すごい大雑把にいうとRiot.jsはHTMLにJSを書くという方針に対してMithril.jsはJSにHTMLを書くという親のReact.jsの流れを汲む文化を継承してるんですが、試しで作ってる時に「HTMLにJS書く方が違和感ない」と思ったからなのでした。 あとはRiot.jsが企業に対してMithril.jsは個人であるといった、開発母体の差もちょっと気になる点でした。 機能面はどちらもミニマムでシンプルでAPI数少なくてとっつきやすいのでそんなに変わらないが、学習コストは独自ルールが多いRiot.jsの方が数段高いと思う。

カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooTools (62) Tutorial (6) Perl (1) PHP (37) CakePHP (2) OOPでBBS (7) Zend Framework (4) Template (29) 4BOX (8) 5BOX (5) 6BOX (4) Form (5) Menu (1) Web Site (6) wordpress (55) plugin (8) Reference (7) Theme

【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム　←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正

IE10が出たそうで。 IE10でjsdoitのPortfolio見ると… — げこたん さん (@GeckoTang) 2013年2月27日 さっそくインストールしたらしい人柱をTLで目撃。きになる。 @geckotang スクショ — Tenderfeelさん (@Tenderfeel) 2013年2月27日 スマホにまみれた生活なのでプレビュー版から華麗にスルーしています。 インストールももちろんしてないので丁重にお願いしてみた。 @tenderfeel こんなんす #jsdoit twitter.com/GeckoTang/stat… — げこたん さん (@GeckoTang) 2013年2月27日 おやおや… jsdo.itのWorksはフレキシブルボックス（display:box）を使ってる。（とこれで知った） @geckotang え、flexible box未対応？それと

Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。 調べついでにメディアクエリーも書いてみた。 下に調べた各端末のサイズを表で晒してるんですけど、 端末サイズが小さくてもブラウザで拾えるwindow.innerサイズは大きいので AndroidスマホのFWVGA以下とqHD〜HD、iPhone、iPhone5、タブレット という具合にざっくりグループ分けできるようでした。 landscapeは単純に値が逆になるのかというとそうではなく、 特にiPhoneの場合にはメニューバーのサイズが変わるのでheightが微妙に変わります。 アスペクト比がはiPhoneが3:2でAndroid端末は16:9、 タブレット端末の場合はiPadは4:3でAndroid端末は16:10 viewport で width=device-width,initial-scale=1,ma

RubyでSassの@functionを作ると色々やれて便利です。 CompassのConfig使うとより便利です。 RubyでSassの@functionを作る これはSassだけでやれます。 1. 適当なファイルを作って拡張子.rbで保存する。 2. ファイルの先頭でsassをrequireする文を書く require 'sass' 3. （2のつづきで）Rubyの構文に従ったモジュールを書く module MyExtension def sample(str) return Sass::Script::String.new("#{str}") end end 4. （3のつづきで）書いたモジュールをSassのFunctionsにincludeする module Sass::Script::Functions include MyExtension end これでincludeしたモジ

CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav

8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて ただでさえヤバイくらい高機能なSassがますますパワーアップした。 Sass信者のみなさんはすでにお使いでしょうか？ 晒したソースはオンラインコンパイラで試せます。 jsdo.itも対応してます。 @content これはmixinにブロックコンテンツを渡せるようにする合言葉。 mixinを作る時、渡されたブロックコンテンツを入れたい場所に@contentを配置すると @mixin iphone { @media only screen and (max-width: 480px) { @content; } } @includeするときに波括弧で括ってコンテンツを渡せるようになる。 @include iphone { body { color: red } } コンパイルすればこのとおり、@mixinの内容＋渡した

春はHTML やうやう５になりゆく仕様は少し明かりて 老いたるブラウザの細くたなびきたる 夏はJavaScript フレームワークはさらなり メタ言語もなほ。Coffeeの議論飛び違ひたる また、ただ是か否かなどブログに打ち明けていくもをかし ゲームなど書くもをかし 秋はCSS Level3の増して、Flashいと近うなりたるに Adobeの開発終わるとて、Swiffy、Walabyなど変換急ぐさへあはれなり まいて画像の連ねたるがいと3Dに見ゆるはいとをかし プレフィックス入り乱れて、Sass、Lessなどはたいふべきにあらず 冬はNode Web Socketはいふべきにもあらず PCのブラウザも、またスマホでも、いとリアルタイムに レスポンスなど急ぎ返してアプリ作るも、いとつきづきし バージョン上がりて、対応増えていけば Android 4.0も未対応になりてわろし 参考：枕草子

パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。 ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。 パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、 よくあるデザインパターンは次の通りである。 1行テキスト テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。 ページタイトルを　>　で繋いだもの ページタイトルを　>　以外の文字で繋いだもの シンプルなリンクの羅列 区切り文字を入れずに画像やCSSで階層を表現する。 マルチステップ 開始から完了までの行程を表示する。 サブナビゲーションつき 各ページリンクに属するページを

[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-

第壱話　　　　HTML5、襲来 第弐話　　　　見知らぬ、タグ 第参話　　　　慣れない、アウトライン 第四話　　　　IE、逃げ出した後 第伍話　　　　W3C、勧告のむこうに 第六話　　　　決戦、HTML5 API 第七話　　　　Canvasの造りしもの 第八話　　　　CSS3、来日 第九話　　　　カンマで、背景、重ねて 第拾話　　　　トランジションタイパー 第拾壱話　　 静止したブラウザの前で 第拾弐話　　 奇跡の配置は 第拾参話　　 IE9、侵入 第拾四話　　 対応、バージョンの差 第拾伍話　　 バグと沈黙 第拾六話　　 エディタに拘る病、そして 第拾七話　　 四本目のブラウザ 第拾八話　　 対応の選択を 第拾九話　　 コーダーの戰い 第弐拾話　　 デザインのかたち、ソースのかたち 第弐拾壱話　iPhone、誕生 第弐拾弐話　せめて、Webらしく 第弐拾参話　涙 第弐拾四話　最後のコーダー

Web2.0的にHTMLソースを隠す方法を修正しているときに思ったんだけど、 単純に小説とかのコピーブロックならCanvas使う手もあるよね。ってことでデモ書いてみた。 Canvas novel – jsdo.it – share JavaScript, HTML5 and CSS Canvasのテキスト関係は図形とかの描画に比べると貧弱貧弱ゥ！な感じだから自分で処理書かないと何も出来ないのだが、Flash化や画像化に比べると格段に楽チンだと思う。 DOMや接続をモニタリングする解析ツールには弱いものの、素の状態でコピペが出来ないというのは強い。 考えられるデメリットは… ガラケーで見れない IEが9からしか対応してない（ライブラリとかで対応させる手間がある） スクロールとかページングとかの処理を実装するのが面倒 jsdo.itにうｐしたデモのロジック解説 小説テキストをXHRで読み込む

2023年は割とAstro.jsを使ってた気がする。ちょっとしたLPを作るのにちょうどいいなって。 AstroでPDF.js が動かないのなんでなん？という質問をコミュニティで見かけたので、試しに実装してみたものを載せておく。 続きを読む

ページタイトルとかパンくずナビとかがリンクしてないのが気持ち悪かったので、 WordPressのタイトル周りの統一感を出す関数を作ってみたYO。 タイトルだと「ページタイトル　» カテゴリー等 |　サイト名」　になり、 パンくずでは「ホーム > カテゴリー等 > ページタイトル」になる。記号はお好みで変更可。 $localから始まるグローバル変数はテンプレートページ内のどこでも使用出来る。 ヘッダに入れるtitleタグのソース： <title><?php print($GLOBALS&#91;'local_head_title'&#93;); ?><?php bloginfo('name'); ?></title> パンクズリンク出力ソース： <?php breadcrumb();?> functions.phpのソース： $local_body_id = null; $local_pag

MoreのAssetsクラスを使うチュートリアル後編です。 前編で背景画像を1枚Assetsクラスで読み込むソースを書きましたが、 今度は背景画像を3枚読み込んでからクロスフェードで切り替えるものに変更します。 導入などの説明はすっ飛ばしてるので前編をご覧下さい。 前編までのあらすじとソース 使いまわす要素や値は変数に入れる Assetsクラスは画像や外部ファイルを読み込める便利なクラス。一枚だけ画像を読み込むときはimageメソッドを使う 背景用のdiv要素をElementクラスで作る 背景要素を挿入してからFx.Tweenでフェードインさせた window.addEvent("domready",function(){ var ImageSrc = "bg_body.jpg";//背景画像のパス var container = $$("body")[0];//bodyタグ contai

何か最近巷がjQueryマンセーな感じで、MooToolsフリークとしては肩身が狭い今日この頃 MooToolsがマイナーなのはドキュメントが少ないからだ！と言われてるようなので、 新しいカテゴリなど追加しつつ手取り足取りなチュートリアルを書いて行こうと思います。 このエントリーでは、MooToolsのFx.Morphクラスを使ってリスト要素をFlashのようにぬるぬる動かします。 完成するとリストメニューが上から順に画面中央付近から左側へスライドインしてくるアニメーションになります。 MooToolsのCoreとMoreについて 今回はCoreに内臓されているクラスを使うのでMoreのクラスは必要ありません。 スクリプトを利用するのにダウンロードが必要なのはダウンロードページのトップにあるMooTools 1.2.4のファイルです。 ダウンロードするとmootools-1.2.4-cor