Pixel Map Generatorは地図をピクセルマップにしてPNGやSVG、HTMLでダウンロードできるジェネレーターです。上図のように日本及びマウスホバーによる都道府県名の表示にも対応しています。他にもアイコンの設置やドット化等も可能となっています。各県をクリックすれば色や名前変更(英語→日本語)も出来るみたい。amChartsと同じ開発者さんのようです。 Pixel Map Generator
Dynamic SVG Background Pattern MakerはSVG製の背景パターンを作成出来るツールです。JavaScriptで作られたシンプルなものになりますがそれ故に工夫次第で面白いパターンも作れそうですね。基本的には<>circle<>要素で構成されていて、半径やラインの厚み、円同士の間隔、円の色(円の背景はCSSで変更可能です。)を用いてパターン化、Base64にエンコードしているみたいです。サイズ変更で遠藤氏が重なる事でユニークなパターンの作成も可能となっています。色はツートーンとなってしまいますが、まぁこれはこれで。 Dynamic SVG Background Pattern Maker
自分用メモ。wp-config.phpの設定 で出来る事のリストです。よくある カスタマイズは、テーマファイル内 にコードを書きますが、wp-config で出来る事を知っておくのもとても 大事ですね。 普段あまり利用しないので覚えてないし、困ったときはいちいち探してるので時間をロスしないようにメモしておきます。 スニペットのメモリストですし、細かい解説は面倒なんでしません。また、「wp-configってなんだろう?」という方には全くお役に立てないと思います。 wp-config.phpで出来る事リスト以下リストです。古いバージョンの事は視野に入れてません。 リストはCODEXのwp-config.phpの編集から抜粋しています。 ※変更前にバックアップして下さい ※自己責任でお願いします ※コード一覧は記事最下部に有ります 01. デバッグモードにするdefine('WP_DEBUG',
予め決められた特定のテキ ストを絵文字に変換する、 というスクリプトのご紹介。 WordPressなどのCMSでも一部 で導入されていますね。需要 は高いほうじゃないかと。 絵文字変換スクリプトです。絵文字はdata URI schemeを使用します。スクリプト自体は非依存型なのでそのままJSとCSSを読み込めば利用可能です。 絵文字はGithubなどでも採用されているものと同様です。なので、置換テキストはEMOJI CHEAT SHEETで確認できます。 例えば :sunny: と書くと 上記のアイコンがリサイズされて置換表示されます。 特定のキーワードを分析して特定のclassを持つDOMに置換するっぽい。 冒頭にも書きましたが、絵文字はdata URI schemeを使用します。よって、LESS等を使うかCSSをコンパイルする必要があります。便利だけど個人的には少し躊躇しますね・・絵
Githubでソースも公開されている JavaScript構文チェックツール・ jsLint.itのご紹介。結構軽量で 使い勝手が良さそうだったので自 分のサーバーに入れて使いたいと 思います。 JavaScript用のLintツールです。同じくOSSのjslint.comを元に作成したそうです。node.jsを使用したLintツール、jshint(先日、次期バージョンも公開されました)やjshintr同様、ソースが公開されています。 JavaScriptコードをコピペするか、ファイルをアップロードする事で構文チェックが出来ます。チェックは構文だけでなく、構造上の問題も指摘してくれるっぽい。 ↑ オプションもやたら豊富。 ↑ エラーもサクッと出ます。 まださほど使ってないので精度は把握していませんけど、軽量でいい感じです。結局ブラウザごとにチェックしないとならないでしょうけど、こういうの知
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです!", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解!', confirmButtonColo
Result jQuery//URLの含まれるDOMをセレクタに指定 $('p').html(function(i, html) { //正規表現でドメインを探して動画のID取得→変数に。 var re = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, //動画再生タグに置換 vid = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>'; return html.replace(re, vid); });cssiframe[src*="http://www.youtube.com/embed/"] { disp
Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google
VimeoのAPIとjQueryを使用したサンプル。 軽量なコードでLightbox風にポップアップ させる、という方法。Vimeo自体日本では 全然使ってる方を見かけませんが、徐々に 浸透すると嬉しいですね。便利だし。とい うか、僕が知らないだけで結構使ってる 方もいるのかもw 仕事じゃなくて個人で使いそうなのでメモ的に。VimeoのAPIを使って、リンクするだけでサムネを表示させてクリックするとLightbox風に表示される動画ギャラリー、みたいなものを簡単なコードで実装します。 Vimeo Gallery こんな風にサムネイルがギャラリー的に表示されて こんな風にLightbox風にポップアップさせます。 以下サンプル。 Sample IE7以下にも手抜きハックで対応させました。もっとちゃんとやれば素敵になるんじゃないですかね。 コード$(window).load(function(
PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhoneとiPadでのキャプチャです。 iPhoneでのキャプチャです デフォルト サムネを幅に自動で合わせてくれます。 ランドスケープ ランドスケープ時でもサムネイルを自動で拡大し、幅を合わせてくれます。 画像の閲覧 単体表示はサムネイルをタップします。左右フリックで進んだり戻ったり。 ナビゲーションもある 単体、ランドスケープ。タップすると下部にナビゲーションバーが
ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装にはjQuery を使います。 土曜日なのでちょっとネタ的な話題です。 数日前に「スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。 これを実装しよう、という誰得な話です。 Sample 以下サンプルです。 Sample コード$(function(){ $("body").height($(window).heigh
「自分であんなサイトを作りたい」と、思う Webサービスは結構多いかと思います。 いくつかの有名なWebサービスは クローンのCMSがオープンソースとして 提供されているものがあります。そんな クローンタイプのCMSをいくつかご紹介します。 既出のCMSばかりですが、個人的も一度まとめておきたいのでメモも兼ねて。 Diggクローン 海外でもかなりの人気ソーシャルサイト、Diggのようにユーザーが投稿、Vote(投票)を行えるCMSです。以前SEOカスタマイズ法も書いたので宜しければ合わせてご覧下さい。Pliggが相性悪いなと思うようならPHPDugもいいかも。 Pligg / デモ Deliciousクローン ソーシャルブックマークサイトとして有名なサイトがDeliciousです。タグを付けてWebサイトへのリンクを簡単に追加、共有できるオーップンソースのCMSがscuttleです。僕もこ
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識最低限かどうか分かりませんけどw 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンスまずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。(アイコンなんかも
マウスホイールで横スクロール+パララックスなWebサイトを作れる、というスクリプト。なかなか良さそうだったので備忘録です。コンテンツが横移動するだけで、スクロールバーは縦になります。 横スクロールなパララックスサイトを作れる、というスクリプトです。jQueryに依存します。 パララックスは種類の山?のようなもので確認できます。非圧縮で4KB前後と軽量なのも嬉しいですね。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jInvertScroll.js"></script> <script type="text/javascript"> (function($) { $.jInvertScroll(['.foo']); }(jQuer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く