[Sass] Sass 3.2で実装された新機能がヤバい
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の内容＋渡した
![[Sass] Sass 3.2で実装された新機能がヤバい](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[js] WebStorageのサポートチェック
LocalStorage や SessionStorageが使えるかどうか確認する時の条件について。 未サポート機種であればwindowにlocalStorageやsessionStorageというプロパティがないので if(window.localStorage)みたいな条件だけでもチェック出来る。 しかしWebViewでも表示する場合、ネイティブ側で使用許可をしていないと 「サポートはしているんだけど使えない」という状況になってsetItem等を使った場合にQUOTA_EXCEEDED_ERRとなる。 WebViewで許可されていない場合はnullを返すので、その条件も含めつつ setItemで適当な文字列を書きこんでgetItemした時に同じ文字列だったら ストレージが使えると判断するのが確実みたいでした。 var hasLocalStorage = (function(){ if(
[css,js] Retinaディスプレイ対策
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。 500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら 1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。 その方法を以下に列挙する。 基本 Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので CSSなりJSなりでその値を判別して振り分ける CSS3 Meia Queries Androidで未対応機種があるため、上書きで使う方が無難。 @media only screen and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-de
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[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-
[Ajax + PHP] Web2.0的にHTMLソースを隠す方法
MooToolsで遊んでる時になんとなく思いついた。 HTMLソースを完全に隠すことは無理っちゃ無理だけど、サイトの内容をパクられたりしないように防御する事は出来る。 主要な柱は以下3つ。 ファイルの置き場所を隠す ソースを読めなくする アクセスを弾く ロボット対策、右クリック禁止、Flashサイト化、HTMLソースそのものの暗号化するなど色々あるけど、 Web2.0とか言われている時代なのでAjaxを使う方法もアリなんじゃないかなと思ったわけです。 クローラーにキャッシュされず、メールアドレスも拾われず、右クリックしても無駄、「ソースを表示」選んでも主要部分は見えない。 それらの需要を大体カバーするサイト制作方法についての解説とサンプル。 簡単なデモを作ってみた （デモはサンプルと構成が異なります） サイト構成例 index.html メニューボタン、コンテンツ表示エリアを置く styl
[jQuery] ユーザエージェント(userAgent)判別プラグイン
ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。 パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレビ・ガラケーのブラウザも判別対象としています。 直接見る Syntax $(document.body).checkAgent( [{option}] ); 対象にしたHTML要素にプラグインが得た情報に基づいたクラスを付与します。 Option 全てtrueまたはfalseで指定。trueにしたものをクラスに追加します。 type パソコン：pc、スマホ：smartphone、ガラケー：garapagos、テレビ：nettv デフォルトは true os PC(win, mac) ガラケー(au, docomo, softbank) スマホ(apple, android) ゲーム(wii
[php] PHPでcsvとtar.gzファイルをダウンロードさせる
ZeroMailの管理画面から、ログと添付ファイルをダウンロード出来るようにした。 ログファイルはCSVで、添付ファイルはディレクトリごと一括してtar.gzです。 CSVはともかくtar.gzにてこずったのでメモっておくことにする。 ※TarはPEARでなくコマンドでやっつけてます。 CSVのダウンロード ZeroMailのログファイルはCSVと同じカンマ区切りだけど、ファイル自体はCSVではなく先頭にexit;したphpファイルで、ログはコメントアウトになってます。 <?php exit;/* "2010/06/25 - 10:53:22","ああああ","ああああ","info@example.com","123-4567","穂気都参古区出藻町12-345","090-2134-5678","http://example.com/","先日購入したグレートソードについてですが、メタ
![[php] PHPでcsvとtar.gzファイルをダウンロードさせる](https://cdn-ak-scissors.b.st-hatena.com/image/square/e57a657e306fbecdf9a925bb63e4e93a7854ee7b/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2010%2F06%2Fdownalert.png)
[WP]WordPressテンプレートカスタマイズ用小技メモ
テンプレートファイルのカスタマイズで使えそうなソースのサンプルをつらつらと書き散らしてみる。その２はこちら。 タイトルの文字数制限 一定数以上のタイトルを省略（抜粋）する。 下記サンプルだと10文字まで拾って以下を三点リーダにしています <?php $title= mb_substr($post->post_title,0,10); echo '<h1>'.$title.'…</h1>'; ?> 検索キーワードとヒット数の表示 search.phpとかに入れると結構見栄えがいい。 <?php $allsearch =& new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; if($count!=0){ echo '<em>'.$key.'</em>
[php] パスワード認証ログインシステムのサンプル
パスワードフィールドに入力された文字列を設定されたパスワードと照合し、一致していたらログイン後画面に飛ばす 簡単なログイン処理のサンプルソースです。 CookieとSession両方晒しておきます。 phpファイルを二つ用意しますが、便宜的に login.php → ログイン画面 admin.php → ログイン後画面 としています。 先頭行にパスワードを設定する定数がありますが、 ファイル数の多いスクリプトではconfig.phpなどを作ってincludeすることが多いです。 ログイン処理の流れは大体こんな感じです。 パスワードフィールドに文字列入れて送信 送信された文字列が設定されたパスワードと一致するか確認 一致していたらクッキー、またはセッションに暗号化したパスワードを保存して次のページへ遷移 一致していなかったらエラーメッセージを出す ログアウト処理について追記しました Cook
[css] フォームのボタンをスタイルシートで画像ボタンに変更する
フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、 もう一つ、ボタンの見た目をCSSで変更する手法がございます。 この記事ではCSSでスタイリッシュなフォームボタンを作る方法について解説します。 メリットとしては、ロールオーバーアクションをCSSで制御出来るという点と、 タイプ属性にimageを指定しないので、送信やリセットなどの機能を殺さないという点があります。 ただし、CSSでのロールオーバーはIE6未対応なので、気になる方はJavascriptと併用してください。 （個人的にはスルーしても問題ないと思っています） (X)HTMLソース buttonとinputどっちでもOK <button id="submit" type="submit">Submit</button> <input id="submit" type="submi
[Ajax] Google AJAX Feed APIでRSSを表示する
Google Ajax APIシリーズ記事その３はFeedについて。 RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。 Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。 なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、３ステップで使えるようにしてみた。 ZIPも用意してみたのでお試しあれ！ ※Mapはこの記事、Searchはこの記事で解説しています。 使い方 まず、Feedを表示させる要素を用意します。IDをつけてください。 デフォルトはgfeedです。 <div id="gfeed"></div> 必要なスクリプトタグをＲＳＳを表示させたいページに読み込ませます。 <script
[mootools]セレクトメニューを連動させて動的に選択肢を変更する
セレクトメニューが２つあって、1つ目のセレクトメニューを選択したら、その値によって２つ目のセレクトメニューの選択肢を入れ替えるというものです。 わざわざ何番煎じか分からないネタを遇えて取り上げたのは、巷でよく見かける「配列にデータを入れて出力する」という方法ではなく、Validなソースでこれをやりたかったためです。 選択肢がやたらと多くなりがちなもの、たとえば県から市を選んだりするフォームなどでよく使われていると思います。 とりあえずセレクトメニュー２つだけ連動させてみました。 XHTML 連動させるセレクトメニューにそれぞれIDが必要。 親セレクトメニューのoption要素につけたクラス名と、子セレクトメニューのoptgroup要素のクラス名を同じにします。 optgroup内に入れた要素が選択された時に入れ替わる選択肢になります。 <label for="select">選択肢１</l
[dw] Dreamweaverの初期設定ドキュメントの内容を変更する
Dreamweaverで新規作成から新しいファイルを作成すると、自動的にいくつかのタグが追加されますが いちいちメタ追加するの面倒だから使用頻度高いのを予め入れてしまおう、という話です。 初期は上記の様にシンプルな感じだと思います。bodyの上にある変な空行も気になるところ。 で、適当にあると便利そうなタグを入れてカスタマイズすると次の様になる。 headの他にbodyの中にも色々入れておくことが出来ます。 また、htmlファイルの他にもCSSとかJavascriptとかPHPとか、 Dreamweaverから作るファイルの初期設定は全て変更する事が出来る。 方法は実に簡単。 Program FilesにあるDreamweaverアプリケーションフォルダの \Configuration\DocumentTypes\NewDocuments に新規作成時のテンプレートファイルがあるので、 こ
![[dw] Dreamweaverの初期設定ドキュメントの内容を変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/2209c2b7ac241efc185d10daf075a94a2c43d553/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2009%2F04%2Fdw.png)
[WP]wordpressでRSSを取得して表示
wordpressにはRSSを取得して配列に整形する機能が備わってるらしい。…というのを最近TwitterAPI調べてた時知ったのでそれについてのメモ。 バージョンいくつからか詳しく確認してないんだけど、手元にあるので一番古いvar2.1.3には入ってた。 よく考えたらダッシュボードのRSSもコレだよな…ので、新しい情報ではありません。 外部サイトのRSSを取得するには次のように書く include_once(ABSPATH . WPINC . '/rss.php'); $rss = fetch_rss($uri); で、これだけ書いたら詳しい人にはﾃｨﾝ!と来るかも。 使用されてるのはMagpieRSS and RSSCacheとSnoopy HTTP client。 たとえば、Twitterのコメントを取得する場合は次のようなソースになる。 include_once(ABSPATH .
[google] Google AJAX Search API でサイト内検索結果をページ内に表示する
Googleのカスタム検索エンジンの検索ボックスと検索結果をページ内に埋め込む方法（オーバーレイではない）について。 Mapと同じくSearchもAPIで色々することが出来ます。 サイト内検索の検索ボックスをサイトに埋め込むのは、登録した時に作成されるコードを埋め込むだけなので簡単ですが APIを利用する場合はJavascriptとAPIの仕様が分かってないとややこしいので、分からない人向けに説明を書いてみた。 この記事では、サイト内検索の検索ボックスと検索結果をAPIを利用して既存ページに埋め込む初歩についてまとめてます。 更に詳しいカスタマイズ方法 についてはDeveloper’s Guideなどを参照してください。 Step1. 新しいカスタム検索エンジンを作成 作成にはGoogleアカウントが必須なので、無いならまずアカウントから作る。 アカウントにGoogleカスタム検索エンジン
![[google] Google AJAX Search API でサイト内検索結果をページ内に表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0dbda16b5be5a3a614c545e7df8d738907ddc38/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2009%2F03%2Fgooglesearchapi-300x201.jpg)
[XHTML]ValidなFlash表示ソース
今更感漂うW3Cに怒られないFlashの表示ソースについて。 マクパペットいじってた時に思い出したのでメモっておきます。 DreamweaverとかでFlashオブジェクトを挿入すると、大体こんなソースですが <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="32" height="32" title="title"> <param name="movie" value="index.swf" /> <param name="quality" value="high" /> </object> これでチェックすると「
[PHP]各曜日ごとの日替わり・特定の日付で表示させる
日曜～土曜の曜日ごと、または特定の日付で表示をさせるサンプル。 定期的に開催されるイベント告知やトップページのお知らせなどに。 携帯サイトでも使えます。 <?php $time = time(); $day =date("j",$time); $jpweek = array("日曜日は","月曜日は","火曜日は","水曜日は","木曜日は","金曜日は","土曜日は"); $event = array("sunday","monday","tuesday","wednesday","thursday","friday","saturday"); $week = date("w", $time); ?> <?php print date("Y年n月j日",$time).$jpweek[$week]."<br />"; print $event[$week]; ?> $wee
[IE] Internet Explorer 8 ドキュメント互換性モードの指定について
IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。 でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、 IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに 新しくMETA要素の X-UA-Compatible により操作が可能に。 簡単にまとめると IE8だと表示が崩れる…IE7なら崩れないのに…orz ▼ METAタグでIE7モードで表示するよう指示 ▼ IE8がその指示に従ってIE7っぽくレンダリング ▼ ｳﾏｰ(ﾟдﾟ) ということらしい。 その場合のMETAタグは次のようになる（Emulate IE7 互換性モードを指定） <meta http-equiv="X-UA-Compatib
[PHP]オブジェクト指向プログラミング
初心者な自分用メモ、みたいなもんです…。 把握までの過程をメモってるので同じく初心者には分かりやすいかも？ 考え方はJavacriptも同じだと思う。 名称 とりあえず呼び方がややこしい。初心者はまずここが覚えられない。 メソッド(method) クラス内にある関数(function)のこと プロパティ(property) クラス内の変数(variable)のこと。メンバ変数も同じ意味 コンストラクタ（Constructor） 初期化用のメソッド。オブジェクト生成時にやりたいことを入れる 継承（Inheritance） クラスを元に新しいクラスを作る。上手いこと作らないとかえって面倒なことになるらしい $this->hoge 簡単なクラスのサンプルを見る。 class Test{ var $hoge = "hoge"; function Foo(){ echo $this->hoge; }
prototype.js vs jquery vs mootools vs YUI vs Dojo
prototype.js、jquery 、mootools、YUI 、DojoAdobeSpry、Dojo、 MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us… 実際使ってるのから名前は聞いたことある程度のものまで、色々と出てきて便利なのはいいんだけど、 正直どれ使えばいいのか分からない…(´д｀)という時もある。自分は大抵mootoolsだけどｗ 選ぶ時の参考になるかもしれないAjaxフレームワークのベンチマーク記事の紹介。 まずPeter Velichkov’s Blogの MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revisedでは タイトルに挙げたprototype.js、jquery、mootools、YUI、Dojoのベンチマークをグラフにし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
