IDEA * IDEAドットインストール代表のライフハックブログ
PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌
Photobooth with PHP, jQuery and CSS3 | Tutorialzine PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル。デモのダウンロードも可能。 デモページはこちらで、なかなかカッコいい。 ページの下部にカメラがあり、クリックするとWEBCAMのFlashインタフェースが開き、写真をとってそのままUPみたいな流れのものが作れます。 カメラ付きのMacbookやAirでも当然使えます。 下部のレンズのクリックでカメラが出ます（当PCにはカメラがついていないので何も表示されておりません） 画像をクリックするとLightBox風にポップアップします。 チュートリアルのわりにチュートリアルらしからぬクオリティ。 これを応用してプロフィール写真の撮影等、サービスに応用してみてもよさそうですね。 関連エントリ CSS3で実装されたボタ
ユーザーが簡単にフィードバック出来るようにするTwitter投稿ボタンをjQueryで作る
Twitterの利用法の一つとしてユニーク なモノがあったので備忘録的にご紹介。 Twitterを簡易的なフィードバックツール にしてしまおう、という内容。今まで通り Twitterに投稿するボタンに、感想を加え るようにします。 普段、TwitterではURLとともに感想が書いてあることが多く、フィードバックのツールとしてTwitterを利用しているWebサイトも少なく有りません。このフィードバックをもっと簡易的にしてみよう、というのが今日の内容です。 サンプルは記事の下のほうにあります。 jQueryを使います。僕は基本的にWordPressを使う人なのでWPにあわせたコードです。便宜変更してください。 $(function(){ var url = "<?php the_permalink() ?>"; var post_title = "<?php the_title(); ?>"
ブログに記事を書いたことをFacebookに投稿するプラグイン（その1）
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 Movable Typeでブログに記事を書いたときに、その記事の要約等の情報をFacebookの自分のウォールに自動的に投稿するプラグインを作りました。 その使い方のうち、今日はFacebookにアプリケーションを登録するまでの手順を解説します。 1.登録を始める まず、Facebookにログインした状態で、Facebookの開発者のページに接続します。 初めて接続する時には、「開発者」アプリケーションを許可することを求められますので、「許可する」のボタンをクリックします。 開発者ページに接続すると、右上に「Set Up New App」のボタンがありますので、それをクリックし
[簡単]FacebookファンページをWordPressに設置して『いいね！』ボックスで世界と繋がろう！ | Last Day. jp
はじめに 最近日本でのFacebookユーザーが増えてきた事を実感しています。『いいね！』ボタンをブログに設置するブロガーも良く見かけるようになりましたね。 参考: 【簡単】WordPressにFacebookのLike(いいね)ボタンを設置する方法 | Last Day. jp 今日はFacebookのファンページを作成して『Like Box』ウィジェットをWordPressのプラグインを使って簡単に設置する方法を紹介します。 Facebookファンページって何？ 簡単に言うとmixiのコミュニティのようなものです。好きな歌手のファンページや映画のファンページと探してみるとFacebookには色々なファンページが盛りだくさんにあります。 ここでは自分のブログのファンページを作り方を説明します。 フェイスブックFan pageの作り方 その1 Topページでファンページと広告をクリ
jQueryを使ってコメント数などをバーの長さに置き換えて数値の差を可視化する - かちびと.net
どこかで使いそうだったのでメモ。 jQueryを使って、数値をバーの長さ で差が分かるように可視化させる、 という方法。マークアップも凄く簡単 なので覚えておきたいTipsです。 サンプルではコメント数を見やすくする のに使われているみたいです。 簡単なコードで実装可能ですし、クロスブラウザで動作してくれます。 Comment Count Bars IT Expert VoiceにあるようなコメントバーをjQueryで実装しよう、というもの。 サンプル コード $(function() { var maxWidth, maxCount; $('#most-commented li').each(function(i) { var $this = $(this); var thisCount = ~~$this.find('.comment-count').text(); if ( i ==
Movable Type + jQuery Mobileによる「計画停電検索サイト」の構築方法まとめ
Movable TypeとjQuery Mobileを使って構築する、スマートフォン向けの計画停電検索サイトのまとめです。 先日公開した「東京電力 計画停電検索（iPhone版）」について、iuiライブラリからjQuery Mobileに乗り換え、それらも含めてサイト構造などについて紹介します。 本来やらなければならないことが他に色々あるのですが、東北地方太平洋沖地震地震が発生してから何も手につかずこの件ばかりやっている状態です。作成した検索サイトは少しでも役立てればと思いますし、この記事も他の何らかのサイトをMovable Typeで構築する際の参考になれば幸いです。 計画停電検索サイト（スマートフォン向け） １．サイト構造 サイトの構造ですが、まず図の下にあるデモ画面のように、 「都県選択」→「市区郡選択」→「町名選択」→「グループ・時間帯表示」 という風に遷移するようにしました。それ
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」:phpspot開発日誌
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは？というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ
Google Analytics をウェブマスター ツールにリンクさせよう
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
jQuery listfolderプラグイン v0.0.3（折りたたみ初期状態設定機能追加）
jQueryでサイドメニューの折りたたみを実現するjQuery listfolderプラグインをバージョンアップしました。 １．追加機能 v0.0.2までは、リストがすべて折りたたまれた状態でしか表示されませんでした。v0.0.3では折りたたみを開いた状態で表示できるよう、プラグインオプションで設定できるようにしました。 v0.0.2までの初期状態（すべて閉じた状態で表示） v0.0.3の初期状態（指定したリストを開いた状態で表示） 特定のリストを開いた状態にするには、次のようにinitOpenオプションを設定します。 <script type="text/javascript"> jQuery(function() { jQuery('#box').listfolder({ initOpen: ['aaa','ddd','fff'], }); }); </script> オプションの値に
jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン
jQueryでサイドメニューの折りたたみを実現するListfolderプラグインを紹介します。同じようなプラグインはすでに存在すると思いますが、勉強がてら作ってみました。 １．機能 このプラグインを利用すれば、サイドメニュータイトルをクリックすることで、リストの折りたたみが簡単にできるようになります。 折りたたみ機能だけであればjQueryを数行書けば実現できますが、このプラグインのウリは折りたたみ状態をクッキーに保持することです。クッキーに保持するので、リロードや他のページに移動しても折りたたみ状態が初期状態に戻ることはありません。 動作は以下の配布ページで確認できます。配布ページのサイドメニュータイトルをクリックすれば折りたたみを行えます。 jQuery listfolder plugin 以下、インストールと利用方法を説明します。 ２．プラグインのダウンロード・インストール List
jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」:phpspot開発日誌
jqmPhp | HTML Code Generator for jQuery Mobile Framework | jqmPhp jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」。 次のようなコードにより、簡単にjQueryモバイルのページを作れます。 <?php include 'lib/jqmPhp.php'; $j = new jqmPhp(); $j->addBasicPage('', 'Hello World', 'It's works!'); echo $j; ?> addBasicPageメソッドによって、jQueryモバイルでのページを簡単作成可能。 単にページの追加だけではなく、ボタンを追加したり、各種コントロールの追加がPHPで出来るところが特徴です。 以下、jqmPhpで作ったページデモ。実際に動作するデモページはこちら このスマートフ
「プロトタイプ＋アンケート」で、効果的に仮説検証する新手法！ (ユーザビリティ実践メモ)
ビービットではオフィス内にユーザビリティラボを設け、日々様々なユーザを招いて実際にサイトを使ってもらう「ユーザ行動観察調査」を実施しています。 ユーザ行動観察調査の特徴は、仮説を具現化した「プロトタイプ」をユーザにぶつけることで、より深いインプットを得られることです。 今回は、そうしたプロトタイプを活用して定量的な検証を行う調査手法（プロトタイプ＋アンケートによる量的調査）をご紹介します。 「プロトタイプ＋アンケート」による量的調査は、実際にプロトタイプを利用してもらい、利用してもらった後にアンケートに答えてもらう、という構成で組み立てを行うアンケート調査です。（図参照） 通常のインターネットのアンケート調査の途中にプロトタイプを閲覧してもらうように指示を入れることで、比較的簡単に実施することができます。 ■メリットは？ 時間・地域制約がなく、大量のデータを集められることがメリットです。
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ:phpspot開発日誌
WEBサービスで使えるPEAR以外で有名なPHPモジュール総まとめ 「WEBサービスを作るなら最低限覚えておきたいPHPのPEARモジュールまとめ」というエントリで先日PEARの便利ライブラリについてまとめたのですが、今回はPEAR以外でも有名なライブラリをご紹介。 PEAR以外で挙げていくときりがありませんが、とりあえず有名どころや、私の知っている物、過去に当ブログで紹介したものをまとめてみます。 他にも便利な物や定番の物がありましたら、@phpspot_kj までTwitterなんかで教えてください。 グラフ描画 JpGraph ありとあらゆるグラフを描画してくれる有名なグラフライブラリ。 pChart グラフにデザイン性を求める場合に使えるクールなグラフ描画ライブラリ PHP/SWF Charts PHPでグラフをFlashで描画出来るライブラリ。グラフに動きを出してインタラクティブ
Evernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[環境作り編] * 男子ハック
@JUNP_Nです。Evernoteを挫折した僕がもう1度本気になってEvernoteに挑戦してみる企画の第2弾。 第1弾がそこそこ評判がよかったみたいなので調子にのって続編です。今回はEvernotoを取り巻く環境を作り直してみたので紹介します。 前回の記事「Evernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[運用ルール作り編]」ではEvernoteを自分に合った使い方をするために考え直して、ノートブック/スタックとタグの使い方に関してルールを決めてみました。 今回はどうやって情報をEvernoteに集約させるかについて考えてみます。 ※ちなみに前回の記事を投稿した後に有料アカウントを取得しました。 目次まずはiPhoneから情報を集約させるこの機会にGoogleリーダークライアントを簡単に比べてみた母艦（Mac）の環境も見直してみた最後にこの記事で紹介したiPh
![Evernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[環境作り編] * 男子ハック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ad87cdc65e68f8b0b13790b44ccad965f74ecc4/height=288;version=1;width=512/https%3A%2F%2Fwww.danshihack.com%2Fwp-content%2Fuploads%2F2011%2F01%2FEvernote_Revenge_2.jpg)
ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」:phpspot開発日誌
ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」 2011年02月10日- WordPress ? WP-OGP WordPress Plugins ブログを一瞬でOGP対応にしてソーシャルサイトでの集客力をUPさせられるWordPressプラグイン「WP-OGP」。 OGPはOpen Graph Protocol の略で、ページ内の<meta>タグに、ページのタイトルやURL、サイト名を記述しておくことで、facebookで「いいね！」を押したとき等に、facebook側がOGP情報を使ってより分かりやすい形でリンクしてくれるというもの。 facebookだけはなく、国内のmixi や gree でも対応しているそう（ OGPについてより詳しくはこちら ) このプラグインを使えば、有効にするだけで次のように、<meta>
Gmailで受信したメールをノートブック、タグを指定してEvernoteへ自動保存する♪ - matuダイアリー
本文中に赤字で注意事項、制限事項を追記しました。リスクをご理解の上、自己責任でお試し下さい。 ０．はじめに Evernoteへの情報収集はしばしばGTDのそれに置き換えられます。 つまり、いったんInbox(デフォルトのノートブック)に情報をためておいて、「これは何か？」というのを自問自答しつつノートブックなり、タグなりで整理していく感じです。 このフロー、実にEvernoteにフィットしていると思うのですが、自動で機械的に収集したものについてもそのフローで回せるでしょうか？ 少なくとも私には無理でした（；^ω^） 自動で収集するものについては、整理まで自動化しよう！というのがものぐさな私なりの考えです。 Webページのクリッピングについては、ノートブック指定／タグ指定して自動で収集する方法はいろんなページで紹介されていますので、今日はGmailで受信するメールについてノートブック／タグを
ブラウザ上で動くnode.jsベースのTwitterクライアントOSS「Streamie」:phpspot開発日誌
Streamie ブラウザ上で動くnode.jsベースのTwitterクライアントOSS「Streamie」。 node.jsベースのオープンソースなので、Twitterクライアントのよい見本となりそうです。（githubにてソース公開) ちょっと作ってみました的なものではなくてTwitterの機能をフルで使えるのも特徴 単に利用するだけでも便利そう。新しいツイートもリロードなしに見ることができます UIもCSS3等を使ってデザインされていてリッチかつ、それなりに洗練されています ＵＩやnode.jsの教材として、あるいは単にTwitterクライアントとして活用することができます。 関連エントリ Twitter・mixi・facebook・はてブ等のソーシャルボタンを瞬時に埋め込めるWordPressプラグイン「WP Social Bookmarking Light」 Twitterで使わ
Open Graph Protocol 付きで「いいね！」ボタンを設置する
Open Graph Protocol 付きで「いいね！」ボタンを設置する Permalink URL http://www.magicvox.net/archive/2011/02030020/ Posted by ぴろり Posted at 2011/02/03 00:20 Trackbacks 関連記事 (3) Post Comment コメントできます Category good egg on 2 Oct 2010 - day 275 Photo by Len Matthews フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 ...... 決まった OGP という書き方で
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
