これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム:phpspot開発日誌
これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム 2010年06月07日- Plugins | jQuery Plugins これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム。 なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。 Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。 タイムライン上をドラッグ＆ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK 見ての通りUIもなかなかいい感じです。 スケジュール管理等に活用できますね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-w
PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」:phpspot開発日誌
PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」 2010年03月11日- Run This! PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」。 ブラウザ内の<pre>コードで記述した部分を、その場でそのまま動かすことができ、うまくサイトに組み込めばより訪問者にとってわかりやすいページを作ることが出来そうです。 例えば、PHPの入門サイトなんかでは挙動を一瞬で確認できてしまいます。 具体的には以下の言語に対応しています。 Ada, Assembler, AWK, Bash, bc, Brainf**k, C, C#, C++, CLIPS, Clojure, COBOL, Common Lisp, D, Erlang, Forth
PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」:phpspot開発日誌
PHP Functions Online PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 うろ覚えのPHP関数の挙動をちょっと調べたいという場合、１個テンポラリなソースを用意して実行してみて確認するとか、コマンドラインで動かしてみるとか色々方法はあると思いますが、ブラウザ上で結果を知ることもできるようです 例えば substr という関数の挙動を知りたい場合、 substr を入力すると引数を入力するためのインプットが現れて入力して「Run」ボタンを押すと右のtextareaに結果が表示されます。 コーディング中に関数の挙動を調べたい場合に覚えておくと良さそうですね
2009年の凄いPhotoshopチュートリアル100種:phpspot開発日誌
2009年の凄いPhotoshopチュートリアルが100種類まとまったエントリのご紹介です。 次のようなすごいチュートリアルが満載です。年末年始に暇な方はこなしてみるのもよいかもしれませんね。かなり力がつきそうです。 以下のエントリを参照してください。 The 100 Most Popular Photoshop Tutorials 2009 関連エントリ プロレベルのPhotoshopチュートリアル集 ボタン作成のPhotoshopチュートリアル集 輝く綺麗なクリスマスツリーを描画するPhotoshopチュートリアル
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
ブラウザ上でC#やPHP5を動かせて遊んで学べる「CodeRun」:phpspot開発日誌
ブラウザ上でC#やPHP5を動かせて遊んで学べる「CodeRun」が凄いです。 最初アプリケーションかなと思ったのですが、全てブラウザ上で動作するので、学習用やちょっとした動作確認に使えます。 ブラウザ上でコーディング 次のように、IDEアプリケーションのようなUIで、C#やPHP5.1を、ブラウザの上で動かすことが出来ます。 プロジェクト作成 New → Project を選ぶと、C#やJavaScript、PHPの色々なプロジェクトが作れることがわかります。 PHPのHellow World のソースが入ったコードがエディタに表示されました。このソースをいじって直接動かせます。 コードを動作テスト 次のようなコードを書いて「Run」ボタンを押してみます。 以下、出力例です。ちゃんと動きました。 c2d6c077f524683db2f00c0e975766810 1 2 3 4 5 6
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」:phpspot開発日誌
PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」 2009年12月04日- PHPのあの関数をJavaScriptでやるには？をまとめた「phpjs.org」が便利です。 PHPを使っていて、JavaScript もかいているときに、PHPのあの関数をJavaScript で実装したいんだけどなぁ、という場合に索引から牽けて参考になります。 例えば、functions ページには使える関数がまとまっているのですが、array系、ソート系、入力チェック系やオブジェクト指向系、日付、ファイルシステム系、Math系、ハッシュなど実に多数のJavaScript用php関数が掲載されています。 例えば、addslashes だと次のような感じでJSのソースが見れます。 function addslashes (str) { return (str+'').repla
少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」:phpspot開発日誌
少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」が公開されています。 小さな枠を３分割させてページをスライドさせるなど動きとしてもおもしろいコンテンツスクローラーになっています。 少ないスペースに色々なコンテンツを置くような場合に参考にできそうです。 デモページを見るとその凄さが分かる筈。 jQueryなので次のように実装も超簡単です。 $('#flips1').flips( { autorun_delay:0, direction: 'left' } ); 詳細・ダウンロードは以下のページを参照してください。 FLIPS | jQuery Plugins
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い:phpspot開発日誌
肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い。 普通の写真をクリック一発で次のように、綺麗な素肌にしてくれるアクションファイルがdeviantARTにて公開されています。 以下の写真を見れば一目瞭然ですね。 使い方ですが、ダウンロードした、.atn ファイルを、Photoshop の「アクション」部分にドラッグ＆ドロップすれば使えるようになります。 以下のエントリを参照してください。 Enhancing skin color by ~mermes on deviantART 関連エントリ 写真を一瞬でクールに出来るPhotoshopアクションが色々 写真をクールに加工できるPhotoshopアクション集 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ:phpspot開発日誌
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ。 次のような、時間に関する指定が一括で出来ちゃうウィジェットが公開されています。 インプットボックスにカーソルを合わせるとポップアップして表示させることも可能です。 時間指定が便利になっていいかもしれませんね。 以下のエントリを参照してください。 Any+Time JavaScript Library
WordPress用テキスト部分強化プラグイン色々:phpspot開発日誌
WordPress用テキスト部分強化プラグインが色々紹介されていましたのでご紹介。 タイトル部分を好きなTTFファイルでタイトルにしたり、文字をハイライトしたりする便利なプラグインがまとまっています。 TTFTitles タイトルテキストを次のようにフォントを選んで画像化できるプラグインだそう。 Simple Pull Quote 下図のような引用を入れることが出来るプラグイン Google Syntax Highlighter WP-Syntax WP-Syntax Colorizer プログラミングのシンタックスハイライト機能を導入 Dynamic Font Replacement フォントを動的に指定したTTFフォントで画像化する リンク先とその他のプラグインを見るには以下のエントリを参照してください。 10 Useful Text Enhancing Plugins for Wor
グランジを取り入れたアーティスティックでカッコいいサイトデザイン集:phpspot開発日誌
グランジを取り入れたアーティスティックでカッコいいサイトデザイン集。 次のように、WEBページっぽくない印象的なデザインが色々とまとまっています。 なかなかダイナミックなデザインなので、一般的なサイトとは違う一皮むけたようなデザインを作ってみたい際に参考にできそうですね。 ISDNなど、一昔では考えられないリッチな画像の使い方ですが、本当にWEBも変わりましたね。 以下のエントリを参照してください。 Grunge In Web Design: Samples And Best Practices | Spyre Studios
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」:phpspot開発日誌
JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」 2009年10月23日- JavaScriptをやるなら覚えておくと超便利な、コードをブラウザ上で開発＆発行できる「JS Bin」というサイトを発見。 ちょっとした動作確認用のコードを書いたり、入門者の方がJavaScriptを学ぶのに非常に有用ですし、その結果も保存してサーバに置いてホスティングしてもらうことも可能。 また、比較的面倒なjQueryやjQuery UI、prototype.js 等の有名どころのフレームワークを簡単に読込めて使える機能もあります。 サイトを開くと、まず3つのタブがあって、JavaScript のタブにはJSを、HTMLのタブにはJavaScript から操作するHTMLを、Output には実行結果が出力されるようになっています。 JavaScript
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」:phpspot開発日誌
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 2009年10月21日- Long Dropdowns 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
ハロウィン用のベクターデータ、ブラシ、フォント色々:phpspot開発日誌
ハロウィンが近いですが、ハロウィン用のベクターデータ、ブラシ、フォントが色々まとまったエントリが公開されています。 サイトにハロウィンの要素を盛り込んで盛り上げたいという場合に使えるかもしれません。 それぞれのリンク先は以下のエントリを参照してください。 22 Halloween Photoshop Brushes, Vectors & Fonts 関連エントリ ハロウィンに関するPhotoshop素材やブラシ集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザの行動を喚起できそうなボタン作成Photoshopチュートリアル:phpspot開発日誌