商用もOKのPHP製投票システムをオンラインで作成⇒ダウンロード出来るWebサービス・Opineo
よくある投票システム、星のマークを クリックして評価するシステムを、Web 上で作成し、PHPでダウンロード出来る Webサービス、Opineoのご紹介です。 スターの形なども変更できるので覚えて ちょっとクールな投票システムを探して いた、という方は如何でしょうか。 投票システムを作成して使える、というシンプルなWebサービスです。ニッチですな・・そのまま使わないにしても、ｊQueryを使った見せ方なども参考になりますよ。 ☆の画像や、バーが伸びる際のスピード、色などを決めて、ダウンロードする、という流れです。デザインが苦手なプログラマーさん向けっぽい感じです。 変更すればリアルタイムで右のプレビューに反映されます。 バーの動作などに関しては、デモを用意したのでご覧下さい。 個人利用でも商用でも無料で利用できますが、リンクウェアとのことです。ご興味のある方は以下よりどうぞ。 Opineo
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
CSSを書くとLESS形式にリアルタイムで変換するWebサービス・Css2Less
CSSを書くと即座にLESS形式に変換 するWebサービス・Css2Lessのご紹介 です。使えるかどうかは別にして、 まだLESSに慣れてない方には練習用 になる・・・かもしれない。LESS も慣れるのが大変ですよね。 オンラインでCSS→LESSにするやつです。 左に普通にCSS書くと即座に右にLESS形式へと変換されます。尚、LESS側にも書けますが、CSS側は変化しません。 圧縮されたCSSでも整形、変換してくれます。 OSSにもなってます ruby製のOSSとしてGithubで公開されてるみたいです。 ライセンスはAGPL3だそうです。 以下よりどうぞ。 Css2Less / Github
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト
捜し物をしている最中に、ちょっと気になったのでテスト的に記事にしてみます。WordPressに新たに追加されたカスタム投稿タイプですが、多少なりにカスタマイズ経験が無いとハードルも低くはない印象なので手っ取り早く作成出来る用にリスト化します。 便利なのにさほど深く浸透していない印象のカスタム投稿タイプ（カスタムポストタイプ）やカスタムタクソノミー（タグに親子関係を持たせる的な機能）とかいろいろと不可解なキーワードで混乱してる方も多いような気がします。 個人的には理解の前にとりあえず触ってみるのもひとつの手だと思いますので、まずは気軽に追加してみてからどういったものか調べればいいかなと。（賛否両論あるでしょうけど僕はとりあえず触って失敗して学びたい人なので カスタム投稿タイプってなんだろう カスタム投稿タイプとは、WordPressにデフォルトである「投稿」という機能とは別の「投稿」機能を加
Node.jsをベースとしたCMS・Calipsoというソフトウェアがオープンソースで公開されてるみたいですね
暇がなくてまだ触ってないのでご紹介 するか迷ったんですけど・・node.jsを ベースとしたCMSがオープンソースで 公開されていました。Calipsoという ソフトウェアで、WordPressやDrupal にインスパイアされたそうですよ。 以前書いたようなちょっとしたアプリケーション（リアルタイムで付箋メモを共有できるオープンソースのWebアプリ・Scrumblr）なら見かけましたが、CMSのような、割と実用性のあるソフトウェアがオープンソースで公開されているのはまだ無い気がしますね・・（あるのかな？ サーバサイドJavaScriptの本命とも言われるNode.jsをベースとしたCMSだそうです。こんなのも作れるんですね・・ OSはUbuntu、データベースはMongoDBを使うみたいですね。ライセンスはMITです。 [note]※下記はインスコ手順じゃなくてリンク先を自分用にメモった
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
jQueryを使って閲覧中のWebサイト自体をその場でプレゼンするサンプル・Screen Presenter
似たようなのがどこかにありました が。閲覧してるWebサイトそのもの をユーザーにプレゼンする、という インターフェースをjQueryで作った デモ。サンプルはダウンロード出来る のでお暇ならぜひ触ってみてください。 アイデアがちょっと素敵だなぁと思いました。Embedded Help Systemと目的は一緒ですかね。IE6以外は問題なさそうでした。cssでなんとかなるかな・・ 左下に矢印があるのですが、これでプレゼンを進めます。プレゼンは、閲覧中のWebサイトの解説をツールチップを出しながら進めていく形となります。 先にデモご覧になったほうがピンと来そうですね。 デモ※別窓 ハッシュチェンジイベント ハッシュチェンジイベントでブラウザの戻るボタンにも対応されています。 動作も軽快で気持ちいいですね。 綺麗に終わります。 Webサービスの使い方とか、CMSの管理画面の使い方のレクチャーに
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。 複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい
テーブルにソート、内容編集、行の削除等の機能を加えるjQueryプラグイン・TableGear
なかなか多機能なライブラリだったので 備忘録。テーブルにソート、コンテンツの 編集や、Ajaxによる行の削除が可能な jQueryプラグイン・TableGearです。この 手のプラグインはいくつかありますが、 中でもかなり高機能な気がします。 jQueryだけでなくmootoolsも用意されてるみたいです。テーブル内でソートが可能で、セル内は編集できます。もちろん、編集後のソートもOK。行そのものを消す事も可能ですよ。 セル内は編集可能で、普段はこのように通常と変らないインターフェースを維持できます。マウスでクリックするとプルダウンや入力エリアが出現。 編集してもソート機能は維持 ソート機能が付いていますが、セル内に変更を加えても、変更後の内容でソートしてくれます。 行の削除も 行ごと削除する事も出来ます。 デモはPHPとMySQLを使って設計してるようですが、他のシステム上でも動作すると
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
WordPressを使ったWebサイトでfunctions.phpによく書いてるやつ
お問い合わせ頂いたので記事にします。 WordPressのfunctions.phpは便利なの はよく分かりますが、結局何が出来るの か分からないのでこんな事できる、という のがあれば教えて欲しいとのことでした。 僕も詳しくないので僕も教えて欲しいんです が、一応書いてみます。 基本的にfunctions.phpはちょっと機能を追加したい、という時に使うものだと思うのでデフォルト機能やプラグインで済むならそうしたほうがいい気がしますのであまり拘らなくてもいいかと思います。 それでも、やはりお仕事ではよく追加する機能はありますのでそれをご紹介します。 ※ウィジェットは割愛しますね カスタムポストタイプadd_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'exam
インスピレーションを刺激させたい時に大抵見てまわるWebサイト集
インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
node.jsを使用した、リアルタイムで付箋メモを共有できるオープンソースのWebアプリ・Scrumblr
個人的にも気になっているnode.jsを 使用したWebアプリをオープンソース として公開してくれているソフトウェア があったのでシェア。リアルタイムで 付箋で貼ったようなメモを共有する事 が出来るWebアプリ・Scrumblrです。 サンプルとしても参考になりそう。 node.jsはサーバサイドのアプリケーションの実装言語にJavaScriptを用いたプラットフォームです。node.jsに関してはnode.jsに関する基礎や開発・チュートリアルのまとめという記事が分かりやすいので合わせてご覧ください。 このnode.jsを使ったWebアプリがオープンソース（GPL）としてGithubにてコードが公開されています。 Scrumblrはnode.jsを使ったWebアプリのサンプルです。デモではjQueryとcss3を併用したメモボードをリアルタイムで共有することが出来ます。 機能 Scrum
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
見にくい原因になりがちなcss3プロパティを無効化するブックマークレット
css3、僕も好きで使うことは使うのですが、 css3を使っている事が理由ですごく見にく いサイトやブログにたまに遭遇してアレな ので無効化するブックマークレットを探して みました。良さそうなのがありましたので 少し手を入れさせてもらいました。 もちろん、css3で素敵でリッチなデザインになっているサイトも多数ありますが、中には逆に見難くなってしまっているサイトも見かけます。たまにストレスになっているのでブックマークレットで対応。 もとはToggle CSS3 Bookmarkletというのがあったんですが、増える様子が無さそうなので手を入れさせて頂きました。 css3を無効化するブックマークレットremove-css3 ←ブックマークレットです 上記をブラウザに登録してください。閲覧中のサイトで使われている以下のcss3のプロパティをリセットします。 -moz-border-radius
「WordPressのfunctions.phpを使って出来るカスタマイズ」をまとめたスレ・Best Collection of Code for your functions.php file
いつかやろうと思っていたWPの functions.phpで出来ることのま とめが、海外のWP専門質問サ イトにあったのでこちらをご紹介。 個人的にもかなり役に立ちました。 Q&Aサイトは色々助かりますよね。 WordPressのテーマファイルで使えるfunctions.phpは色々とテーマの機能を拡張するのに大いに貢献してくれます。 このfunctions.phpを使って何が出来るのかは、WebデザインレシピさんのWordPressのfunctions.phpに書いておくといいかもしれないコードいろいろという記事をご覧になってみてください。 今日ご紹介するBest Collection of Code for your functions.php fileというスレッドには79個の回答があります。 WordPressの情報専門のQ&Aサイト・WordPress Answersでのスレッド
トトロの形をした可愛いシュークリームがあると聞いて
昨日、お仕事で京王井の頭線の 高井戸まで行ってきたのですが、 高井戸にジブリ映画のトトロの形 をしたシュークリームがあると聞い て予約して買ってみました。想像 以上に可愛かったのでクチコミ。 著作権とか大丈夫なのかなとか余計な心配したんですが、経営されている方が宮崎さんのご親族の方なんですね。店内にサインやイラストがやたらありましたよ。 白髭のシュークリーム工房 はてブ100以上付いてるｗ皆さんトトロ好きですね。僕も大好きです。 高井戸駅から徒歩10分ほどで到着。駅を出てから1回だけ右折するだけなので迷わず行けました。外観もジブリっぽい。 予想してたより可愛かった 4つ予約。（※僕一人で全部は食べてないですよ）モチーフで味が分かるようになっていました。葉っぱがカスタード、麦わら帽子はチョコクリーム、サクラの花びらは季節限定のイチゴクリームです。 並べても可愛い。 円陣組ませても可愛い。 上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
