予め決められた特定のテキ ストを絵文字に変換する、 というスクリプトのご紹介。 WordPressなどのCMSでも一部 で導入されていますね。需要 は高いほうじゃないかと。 絵文字変換スクリプトです。絵文字はdata URI schemeを使用します。スクリプト自体は非依存型なのでそのままJSとCSSを読み込めば利用可能です。 絵文字はGithubなどでも採用されているものと同様です。なので、置換テキストはEMOJI CHEAT SHEETで確認できます。 例えば :sunny: と書くと 上記のアイコンがリサイズされて置換表示されます。 特定のキーワードを分析して特定のclassを持つDOMに置換するっぽい。 冒頭にも書きましたが、絵文字はdata URI schemeを使用します。よって、LESS等を使うかCSSをコンパイルする必要があります。便利だけど個人的には少し躊躇しますね・・絵

優れたUXのスマフォ向けアプリ のスクショを紹介するデザイン ギャラリーサイト・UX Archive のご紹介。数はまだ多くは無い ですけど、スクショの数が多い ので参考になりそう。 UXが優れているスマフォアプリのスクショを紹介するギャラリーです。優れているかどうかは触って見ないと何とも言えませんけど、参考にはなるかなと。

日本だけでなく、海外の方もターゲットにしているコンテンツに需要あるかも、と思ったのでメモがてらご紹介します。様々な国の郵便番号を取得できる、というAPIを公開、提供しているWebサイト、Zippopotamusです。勿論、日本も入っていますよ。 無料で利用出来ますが、まだ完全なものではありません。ただ、プロジェクト自体は凄く素敵だと思うので有志に期待です。 世界の国名や市区を郵便番号で取得出来る、というもの。と書くと凄そうに聞こえますが、日本に限ってはまだ実用段階とは言えません。ただ、OSSとしても公開されているので今後に期待したいかも。 デモ日本のを作ってみました。住所はローマ字で取得されます。 現状は日本人向けではないですね。 コード取得したい国に合わせてAPIを叩きます。 http://api.zippopotam.us/JP/100-0001 上記のように/国コード/郵便番号で取得

CSS3で～を作った！という類の ものはかなり見かけていました が、今度はbox-shadowだけで 名画モナリザを描いた方が出て 来ました・・・熱意が凄いです。 役に立つかどうかは置いておいて。 今朝見かけたので記事差し替えてご紹介。CSS3のbox-shadowだけでモナリザを描いた鬼才が現れたようです・・tableで絵を描いてる方も以前見かけましたが、こちらのモナリザも劣らず凄い。 CSSモナリザ CSSの記述が多いためか、僕の環境ではCSSのタブを開くとブラウザがフリーズしてしまいました。コードは元サイトでご覧頂くといいかもです。 しかし良く思いつきましたね・・・思いついても普通やらないでしょうしｗ 熱意に感動してのご紹介でした。 (via:Hacker News)

日曜日ですが、良さ気なツールを 見かけたので備忘録的にご紹介。 色覚障害の方、俗に言う色弱の 人にとってWebサイトがどう見えて いるかを教えてくれる、という Webサービスです。 「色覚障害の方は～色が～に見える」と言った記事はたまに見かけますが実際はケースバイケースです。一応自分も国家医療資格の保有者なので、医学に関する事を軽々しくブログ等で書かく訳には行きません。なので、教科書に載ってる程度の事にだけ触れるようにしておきます。 人が刺激として錐体と呼ばれる器官で受けられる色は青、赤、緑の3色です。これらが全て正常に揃っているのがC型、赤の錐体に異常があるのがProtanope（P型）、緑の錐体に異常があるのがDeuteranope（D型）で、この2つのタイプが最も多く存在します。稀に青の錐体に異常がある場合もあります。これはTritanope（T型）と呼ばれます。 これらの3つのタイ

今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。 フォームサンプル HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。 <div> <label for="email">メール</label> <input type="email" id="email" name="email" placeholder="example@example.com" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="val

以前やろうと思ったカルーセルを 実装できるプラグインが配布されて いたので備忘録。幅の異なる要素 にも対応できるカルーセルです。 多くのカルーセルやスライダーは サイズ固定ですよね・・・ 多くのカルーセル系スクリプトは、一度に進む幅が一定の値にされているため、回す要素のサイズを統一する必要がありました。Lemmon Sliderは異なるサイズの要素を並べてもそれぞれの幅を判別して送ってくれます。 上記のように幅の異なるアイテムでも幅を解析してスライドさせたときにピッタリ揃えてくれます。また、IE6などのオールドブラウザにも対応しています。 動作サンプルです。 div等のボックス要素も対応可能、画像もサイズを指定する必要は無く、幅を解析して自動でそろえてくれます。 コード<script type='text/javascript' src='http://ajax.googleapis.co

モーダルウィンドウを表示する際に 遠近感を加えて分かりやすくする、 というコンセプトの元、作られた スクリプト・Avgrundのご紹介です。 思いつきませんでしたが、結構いい ですね、これ。 遠近感のあるモーダルウィンドウを実装する非依存型のスクリプトです。これはいいエフェクト。説明するより見たほうが早そうですね。 Sample以下動作サンプル。ボタンを押せばモーダルウィンドウが表示されます。 確認出来ましたでしょうか。 コード<script type="text/javascript" src="avgrund.js"></script>avgrund.jsを読み込む。あとはマークアップです。 <button onclick="avgrund.activate();">クリック！</button>avgrund.activate()をclickさせればイベントが発火します。 <aside

フィルタリング可能なGoogleマップ を実装するjQueryのライブラリです。 便利そうだったのでメモがてらご 紹介。Googleマップも工夫次第で 自由が利くようになるのでやはり 重宝しますね。 フィルタリング可能なGoogleマップを実装するプラグインです。 検索やフィルタリングが可能なGoogleマップを実装できる、というプラグイン。Fusion Tables、API、Bootstrap等が併用されています。 Fusion Tablesのセッティングが若干面倒そうです。この辺はドキュメントを参照して下さい。 時間無いので今日はこの辺で。 Searchable Map

コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop

よくある拡大鏡を実装するスクリプト です。マークアップも楽で、コード も少量で済むので参考にしました。 そんなに多用するUIではありませんが、 便利は便利なので覚えておきたいです。 方法が好みだったのでメモ的に。いわゆるルーペ的なを実装。 SamplejQueryを使います。 ドラッグで動かします。CSS-Tricksでもだいぶ前にプラグインを作ってました。こちらはクローンを自分で用意する、というものでしたが、今日のコードは指定したセレクタ内のDOM要素のクローンを作成してオリジナルの上にレイヤーとして重ねてCSSで部分的に表示、JSでドラッグ出来る様にすると拡大されたように見える、という仕組みっぽいので、マークアップは普通でOKです。 CSSを外すと、クローンが作られているのがわかります。 IE6も含め、殆どのブラウザで動作するみたい。ただ、border-radiusと相性悪いそうです。

WordPress3.4から搭載されたライブ プレビュー機能に、CSSを直書きする 項目を追加できるWordPressのプラグ イン・Live CSS Previewをご紹介し ます。こういう事も出来るんですね。 WordPress3.4のライブプレビュー機能(テーマカスタマイザー？)は、テーマのプレビューを見ながらタイトルを変更したり、ヘッダ画像を変更できる機能ですが、この項目にCSSの項目を加えるプラグインがLive CSS Previewです。尚、ライブプレビュー機能の細かいは偉い先生方がしてくださるでしょうから一般人の僕は出しゃばらない様にしときますね。 こんな感じでCSS項目が追加されています。あとはいつも通り書けば即座に右のプレビューに反映されます。で、保存すればカスタマイズ完了、みたいな流れです。それだけのシンプルなプラグインですけど、便利っちゃ便利ですね。 JavaScri

Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定するスライドごとの動きはimpress.js同様、カスタムデータ属性で操作します。 <div class="mosho-slide" id="3d-transform" data-x=1120

自分用メモ。wp-config.phpの設定 で出来る事のリストです。よくある カスタマイズは、テーマファイル内 にコードを書きますが、wp-config で出来る事を知っておくのもとても 大事ですね。 普段あまり利用しないので覚えてないし、困ったときはいちいち探してるので時間をロスしないようにメモしておきます。 スニペットのメモリストですし、細かい解説は面倒なんでしません。また、「wp-configってなんだろう？」という方には全くお役に立てないと思います。 wp-config.phpで出来る事リスト以下リストです。古いバージョンの事は視野に入れてません。 リストはCODEXのwp-config.phpの編集から抜粋しています。 ※変更前にバックアップして下さい ※自己責任でお願いします ※コード一覧は記事最下部に有ります 01. デバッグモードにするdefine('WP_DEBUG',

ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25％、50％、75％といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c

プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日本でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub

CSSスプライトの作成、保存、共有が 可能なWebサービス・SpritePadのご 紹介です。少し大きめのプロジェクト 向けのサービスですかね。ドラッグ とドロップで作れるのはちょっと 良かったです。 昨日までずっとエラーで動かなかったんですが、改善されたようなのでご紹介します。simplessっていうLESSコンパイラがあるんですが、これを作成した会社さんのサービスみたいですね。 ドラッグ&ドロップで配置出来るCSSスプライトの作成ツールです。既に沢山にたようなのはありますが、直感的で使いやすかったので。 ここにローカル環境から画像をドロップすればアップロード出来ますので、あとは配置していきます。ユーザー登録すれば保存可能ですよ。 一纏めにされた画像とCSSが渡されます。class名は画像の名前を適応しますのでどれがどれだか、みたいな事も無いでしょう。 プレミアムユーザー プレミアムにな

よく、ブログのフッターやサイドバーに Flickrに投稿した写真が表示されていた りしますが、これをTumblrでやりたい、 っていう場合の方法。jQueryとTumblrの APIで表示します。Tumblrユーザーさんの 方が自分の周りで最近目立つ気がするの で書いてみます。 FlickrよりTumblrに投稿した写真をブログに載せたい、みたいな方向け。テキストや動画の投稿は省いて、画像だけ取り出してリンクも付けます。 ゴール ブログに、とか書きましたけど、最大50個表示出来るので50個表示しました。数は指定できます。 APIはv1とv2があって、新しい方のv2を使わないとアレなんですが、APIキーの取得が面倒だったのでv1を使用しています。なのであんま参考にならんかもですね。 参考にさせて頂いたのは以下のAPI和訳ページです。 チラシの裏 — Tumblr APIの使い方を勝手に和訳し

もういくつも出回ってますので今更感 もありますが、個人的にはいくつあって も困らないのでご紹介。レスポンシブ Webデザイン設計用のシンプルなテンプ レート・The Goldilocks Approachです。 殆ど何もない状態なので使いやすい。 いろいろと便利なフレームワ－クはありましたけど、結局フレームワーク自体を自分で作らないとならなくなってくるのでその候補としてメモ。 シンプルなテンプレート。中身が無く、記述だけしていけばいい、みたいなやつです。IEに対応できるようにmodernizrが含まれています。 ケーススタディです。シンプルで1カラム。ちょっとしたプロダクトサイトなんかこういう感じですよね。 ブレークポイントも1つしか設定されてません。 @media screen and (min-width: 30em) and (max-width: 63.236em)そのため、複数グ