グリッドレイアウトの雛形を作成 出来るWebサービスのご紹介。よく あるサービスですが、OSSとしてソ ースも公開されているのでローカル 環境でも使えるのが有難かったの でシェアしたいと思います。 よくあるグリッドレイアウト生成ツール。OSSとしてソースコードも公開されているので自分用にカスタマイズする事も出来ます。
![グリッドレイアウトの雛形を手軽に生成出来るジェネレーター・The jQuerin Grid Builder(OSSにもなってます)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b0a29c580a058edfa159724c7b67e312ff068c1f/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2012%2F08%2Fgrid000.jpg)
グリッドレイアウトの雛形を作成 出来るWebサービスのご紹介。よく あるサービスですが、OSSとしてソ ースも公開されているのでローカル 環境でも使えるのが有難かったの でシェアしたいと思います。 よくあるグリッドレイアウト生成ツール。OSSとしてソースコードも公開されているので自分用にカスタマイズする事も出来ます。
地名と緯度経度を指定すると、 ストリートビューを表示出来る WordPressのプラグインのご 紹介。ストリートビューには コメントも加える事が出来る 様になっています。 用途は多くは無いかもしれませんけど・・変わった機能なのでシェア。 カスタム投稿タイプを使ってストリートビューを表示させるWPプラグイン。 地名をタイトルに、オプションで緯度と経度を入力して記事として更新します。複数書くと、スライド式にストリートビューを見る事が出来ます。 緯度と経度を入力するとこのようにSVが表示されます。SVにはコメントを残せます。 なかなか面白いです。プラグインは以下でダウンロードできます。 Street View Comments
ファビコンに動的な円グラフを実装 するJavaScriptライブラリ・Piecon のご紹介。ユニークなライブラリで すね。以前、ファビコンでテトリス を実装するライブラリを見かけまし たけど、今後増えるのかな。 なかなか面白い。ファビコンに動的な円グラフを表示させるスクリプトです。非依存型なのでPiecon単体で動作します。 ファビコンとして表示された円グラフは時間と共に変化させる事が出来ます。 Sample コードPiecon.setOptions({ color: '#ff0084', // グラフの色 background: '#bbb', // グラフの空部分(empty)の色 shadow: '#fff', // 外側の円のボーダー色 fallback: false // タイトルバーのパーセンテージの切り替え設定 });ライブラリを読み込んで上記のようにセッティングします。
ちょっと面白そうだったのでシェア。 Webデザイナー専用のマーケットプレ イス、Fol.ioです。PSDやAI、EPS、 PNGなどのフォーマットを簡単にア ップロード可能で、そのまま販売でき るみたいです。 特化型のマーケットプレイスです。もう既に似たようなサービスは出回っているので珍しくないかもですけど。 Webデザイナー用のマーケットプレイス。練習で作った素材やボツになった素材等をリサイクルできる、みたいな感覚・・でしょうか。 確かにいいものを作ってもローカルフォルダに埋もれて、最終的にゴミ箱行きにしてしまうのは勿体無い気もします。ガレージセール感覚で販売できるとちょっと素敵なんじゃないかなぁ・・と思うんですが如何でしょう。 手軽に作成物をアップロードできる、というのが大きな特徴のようです。 ちょっとしたものをちょっとした値段で買える。 今は招待制みたいですね。気軽に買えるし気軽に売
コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop
今さらですけど、「SEOってどんなもの?」 っていうおさらい的な記事を書いてみます。 一部の業者さんによってSEOへの認識は まったく違うものになってしまい、頭の良い 人まで勘違いするようになってしまいました。 残念な事です。 というわけで、おさらい。SEOとは何か、について簡単に。とくに釣られたわけではないでs SEOとは SEOはサーチエンジン最適化の略称です。現在はもうGoogleが主流なのでGoogleに最適化するのがSEO、という認識で大体あってます。勿論、人が使う検索エンジンは他にも沢山ありますが。 では、「最適化」とはどういったものを指すのでしょうか、という話なんですが、まぁ最適化する為の施工なので、 ユーザーにとって有益でないコンテンツを表示させないようにする クローラーにsitemapを送信してインデックスするのを助けてあげる URLの変更等で、適切なリダイレクト処理を行
JavaScriptの開発をブラウザ上で 行えるjsfiddleの正規表現版です。 reFiddleはオンラインで正規表現 テストを行えるWebツール。勉強に もいいかもしれませんね。僕も 全然出来ないので学びたい。 愛用しているjsfiddleの正規表現版、みたいなツールです。jsfiddleのように、実行テストを他サイトに表示させたりは出来ませんが、UIも似ているので同じ感覚で利用できそうです。 左側でJavaScript、ruby、.NETから選択してテストしたいコードと、コードテスト用のテキスト等を書けばいいだけ。保存も可能です。 マッチした部分がハイライトされる、というシンプルな作りです。jsfiddle同様、ユーザー登録も可能で、フォークも出来ます。 何より使い慣れているツールとUIが似てるのが嬉しかった。正規表現全然出来ないのでこれで暫く勉強してみる事にします。 reFidd
WordPressの投稿画面で、Flickrで CCライセンス画像を検索、クレジット 表記付きで投稿できるプラグイン、 Pick a Pictureのご紹介です。個人 的にはあまり利用しませんが、需要は ありそうな気がします。 以前、全く同じプラグインをご紹介しました。 画像を投稿する際にFlickrで検索、著作権表示付きで記事に挿入出来るプラグイン・Flickr Photo Post こちらよりも今日紹介するプラグインの方が使い勝手が良かったので改めて紹介します。 画像のアップロード項目にFlickr検索が加わります。CC-BYなのでクレジット表記が必要ですが、このプラグインはクレジットも付けてくれます。 ↑ 以前紹介したFlickr Photo Postでの不満点は1ページの検索件数が少なくて探しにくいことでした。Pick a Pictureでは12件、24件、54件、102件と選択で
結構良かったのでご紹介。スマフォ やタブレットなどのモックアップを 直感で作成出来るWebサービスです。 かなり簡単に作れるので選択肢の 一つとして覚えておくといいかもし れません。 有料ですが、結構良さそうなモックアップツールです。動作も軽くてサクサク作れます。 有料のモックアップツール。最安で月/29USDとなかなかの値段ですが、それに見合う機能だなぁとは思います。 パッと見、地味ですけど・・機能は結構凄い。触って頂くと直感で作成出来るのが実感できると思います。操作はドラッグでパーツを持っていって配置するだけ。Cacooを使う感覚に近いかも。※個人の感想です ↑ パーツは各種デバイスのものが用意されていますが、アップロードも可能です。アップロードはユーザー登録が必要です。 ↑ 何個も同時に作れます。ダブルクリックで新規モックアップ作成です。 ↑ 作ってて楽しい。 他、アニメーション遷移
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード<script src="http://ajax.googleapis.com/a
先日リリースされたWordPressの 新バージョン、WordPress3.4から コアファイルにjQuery UIをタッチ デバイスで動かすライブラリが 追加されたみたいです。jQueryUI あんま使わないですけど・・ WordPress3.4から、以前ご紹介したjQuery UIをタッチデバイスに対応させるライブラリ、jQuery UI Touch Punchがコアに導入されました。動作デモや詳細は前に書いた記事をご確認下さい。 jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch 読み込み方面倒臭いので細かい解説は割愛します。今日はライブラリの場所だけご紹介。 wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core','/wp-includes/js/jque
以前、同じ機能のプラグインをご紹介 したんですけど、もっと簡単なコード で実装できるみたいなので改めて備忘 録。ログイン名を忘れてしまう方も 少なくないのでメールアドレスでも ログイン出来ると親切ですね。 以前紹介したプラグインは下記になります。 ユーザーIDでも登録したメールアドレスでもログイン出来るようにするWordPressプラグイン・WP Email Login 今日のコードはもう少しシンプルなものになります。 下記をfunctions.phpに追記します。 function login_with_email_address($username) { $user = get_user_by('email',$username); if(!empty($user->user_login)) $username = $user->user_login; return $username
昔からあるWPのプラグインみたい ですが、先日知ったばかりで、と ても助かったので感謝も込めて ご紹介。WordPressのウィジェット 単位で簡単に条件分岐する事が 出来ます。 ウィジェット単位で条件分岐できるプラグイン。結構前から存在してるんですね。初めて知りました。かなり便利ですねこれ。 先日、クライアントさんの要望でTwitterアカウント名とツイート数を指定してツイート表示を簡単に管理できるように、上記のようなウィジェットを作成しました。 そのウィジェットをページ毎に表示したりしなかったり出来ないか、という追加要望を頂きました。スタッフの紹介ページ毎にそれぞれのツイートを表示したい、というものです。 簡単に出来ないか方法を探したところ、見つかったプラグインがWidget Logicだったんですが、結構前から存在してたみたい・・知らずに損した。 ウィジェットにコンディショナルタグを
昨日ちょっと嵌ったのでメモ。 WordPressの自作ウィジェット で分からなくて調べたことを 備忘録として残しておきます。 面倒だけど覚えると便利ですね。 進行中の案件で、ウィジェットによるコンテンツ管理が仕様に含まれています。その時にちょっと嵌ったことをメモ書き。完全に個人的なメモです。 尚、自作ウィジェットの作成法が分からんという方は以前の過去記事をご参照下さい。 WordPressのウィジェットを自作するためのTips なので目新しい情報は一切無いです。 作成したウィジェット作ったウィジェットはもうちょい要素が多いですけど構成は極めてシンプルなものです。 add_action( 'widgets_init', 'foo_bar_box' ); function foo_bar_box() { register_widget( 'Foo_Bar_Box' ); } class foo
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
よくある拡大鏡を実装するスクリプト です。マークアップも楽で、コード も少量で済むので参考にしました。 そんなに多用するUIではありませんが、 便利は便利なので覚えておきたいです。 方法が好みだったのでメモ的に。いわゆるルーペ的なを実装。 Sample jQueryを使います。 ドラッグで動かします。CSS-Tricksでもだいぶ前にプラグインを作ってました。こちらはクローンを自分で用意する、というものでしたが、今日のコードは指定したセレクタ内のDOM要素のクローンを作成してオリジナルの上にレイヤーとして重ねてCSSで部分的に表示、JSでドラッグ出来る様にすると拡大されたように見える、という仕組みっぽいので、マークアップは普通でOKです。 CSSを外すと、クローンが作られているのがわかります。 IE6も含め、殆どのブラウザで動作するみたい。ただ、border-radiusと相性悪いそうです
WordPressの関数で検索できて、使い方 も掲載してくれているリファレンスが あったのでメモ。CODEXの方が情報は 確実ですけど、日本語版は稀に情報が 古い場合もありますので、保険的に 抑えておくことにしました。 関数のみに限定しているのでノイズも少なく、個人的には有用なサイトでした。 hotというのは多分3.3で新たに追加された関数だと思います。右のfunctionsが既存関数のリファレンスページに通じるリンクです。 一覧ページではアルファベット順に関数と引数、戻り値、追加されたときの本体のバージョン、コア内の場所が一覧化されます。 関数の個別ページでは最低限の情報が書かれています。 ご利用は以下より。 QueryPosts.com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く