サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
blog.3ot.net
たとえばこんな文字列があったとして↓ Reply-To: hiroya Fujii (xxx@example.net) メールのヘッダですね。この文字列から名前とメールアドレスを抜き出したければこのようにして↓ $str = 'Reply-To: hiroya Fujii (xxx@example.net)'; if(preg_match("/^Reply-To:\s([^()]+)\s\((.+)\)$/", $str, $m)){ echo $m[1].'さんのメールアドレスは'.$m[2].'です。'; } てなかんじでやれば、 hiroya Fujiiさんのメールアドレスはxxx@example.netです。 と出力されます。 私はこれが当たり前だと思ってずっとこれをやってたわけですが、な、なんとこういうやり方もあったというのを初めて知ったのでした↓ $str = 'Reply-T
ながーい行数のデータを複数ページにまたがって表示するときに使うページ番号のリンクナビゲーションをpagerとかpagenationとかいいます。あれがないとページ送りができなくて困ります。非常によく使うものですが、これを自作するのはけっこうめんどくさい!いや、自分でやらなくてもありものがいろいろ出てるわけですが↓ PEAR::Pager (定番!) jQuery Plugin::PAGINATION (jQueryだからお手軽!) この度、勉強としてclassを自作してみました。データの総数を引数に渡すと<ul class="pager"><li>xxx</li>...</ul>みたいなhtmlを返します。それをcssでビューティに仕上げて一丁アガリ。引数はデータ総数だけですが、pagerの長さ、1ページに表示する行数、クラス名、クエリ文字列などをオプション指定できます。詳しくは後述。 い
jQueryのuiはべんりなオモチャパックというかんじでいろいろそろってます。sortable.jsをときどき使うのですが、ネストしたリストでこれを使うと、動きがままならないときがあって、jumpyというんですかね、要素をドラッグして移動させようとすると、ビョーンとへんなところにいっちゃうときがある。ネストしたもんじゃなければパーフェクトなのですが。。オプションの中にconnectWithてのがあって、これを指定するとソート対象のli要素をあっちこっちにも動かせるようになるわけですが、ネストしてるヤツの場合は、ここに親要素子要素を指定すりゃいいはずなんだけど、なぜかビョーンが発生する。sortableのオプションについて詳しくはこちら↓ UI/API/1.7.2/Sortable/ 私の指定の仕方が悪いのだろうかと思ってたのですが、やはり似たようなジタバタをしている方がいるみたいで↓ jQ
Javascriptで(jQueryの話)、既にあるimgタグの中身を更新したい、つまり、src属性の値は同じなんだけれども、画像そのものが変わっているので、強制リロードさせたいとき、たいていのブラウザはキャッシュを呼ぶので、 var src = '/path/to/img.jpg'; $('img').attr('src', src); とやってもなにも変わりません。くそお。 こんなときには、srcの最後に "?xxxxx"みたいなインチキクエリをくっつけてやると、ブラウザは「ちがう画像だ!」と解釈して新しい画像に差し替えて表示してくれるようになります。"xxxxx" に入る文字列はなんでもいいですが、常にユニークであることが望まれるので、普通はtimestampを使うようです。 var timestamp = new Date().getTime(); $('#img-id').att
RSSは1.0系/2.0系/atomという仕様が混在しています。各仕様別の関数をつくるのめんどくさくて死にそうというあなたの人生を救ってくれるクラスライブラリ。取得したいrssのurlを引数にして渡すとオートに判別し、結果を配列にして返してくれます。キャッシュ機能つきなので、必要に応じてサーバの負荷も軽減できます。スバラシイ。 ためしにともだちのいらさんちのブログのRSSを表示させてみました。ウハ。こんなかんじのがサクッとできちゃいます↓ タイトル:いらむしblog 解凍したフォルダをそのままサーバにアプロード。pearディレクトリにアプすれば長ったらしいパスを書かなくてよいが、別の場所でもよい(たぶん)。別の場所に置いた場合はフルパスを指定する。次のようなかんじのサンプルスクリプトでRSSの取得結果が表示されます。コメント入れといたんで参考にしてください↓ <?php // モジュールを
Nettuts+にセレクタを使いこなすための10のTraversingワザってのが載ってました↓ 10 Really Helpful Traversing Functions in jQuery レビューサイト等でよく使われるレーティングのガジェット、ユーザーがクリックするとスターマークが点いたり消えたりするヤツですね、あれを例題にして、jQueryのセレクタの機能についてチュートリアルしています。記事を読んだだけだとフーンってなかんじで忘れちゃいそうなので、例題サンプルの意味を日本語で書き出してみました。 元記事の方では、わかりやすい図版といっしょに解説されています。英語苦手な方はそっちの絵を見ながら読んだらいいかもです。 紹介されているものの中には「知ってるけどいままであまり使ってなかったもの」ってのがいくつかあって勉強になりました。jQueryのセレクタはむずかしいパズルみたいですよ
deviantARTに半透明クリアのDVDパッケージのPSD画像てのがあって、manichoさんという方がつくったもんで、こりゃきれいだなーと思いました。PSDをダウンロードできます。レイヤーがわかれているのでPhotoshopで好きな画像に差し替えて遊べます。 これをPhotoshopでやるんでなくGDでやればパパッとできるなと思ってコードを書いてみました。この作品のダウンロード数はすごい数字なので既にだれかがやってる気がしますが、勉強がてらやってみようかなと。 以下のふたつの画像を合成して↓ これはpng これはjpg こうなっちゃうというもんです↓ pngで出力 コードはこちら↓ function generatePng($jpg, $pkg, $dist=false, $w=false, $h=false){ if(!$w){ list($w, $h) = getImageS
先日、TraversingのアレコレをNettuts+に教わりましたんで、その応用練習ってことで、よくあるテーブルのデザインのサンプルをつくってみました。こういうの↓ http://1-pixel.com/sample/jquery-table/sample.html cssはhtml内に書かれています。よくあるヤツです。jsはコレです↓ $(function(){ table(); }); function table(){ $('tr', '#sample-table') .hover( function(){ $(this).addClass('tr-selected'); }, function(){ if(!$('input[type="checkbox"]', this).attr('checked')){ $(this).removeClass('tr-selected');
すっかりスマートオブジェクターになっちゃいました。これべんりだ。簡単に機能を説明しとくと、Photoshop上で一部の複数レイヤーをカプセル化してまとめることができる。それはガチンとかたまったかんじでいちまいの絵のように扱えるが、グループ化やラスタライズとはちがう。その実体は.psbという拡張子の別ファイルに保存されている。.psbの方ではレイヤーが保持されており、そっちとこっちがリンクされている。親ファイルである.psd上で、スマートオブジェクトを拡大/縮小/変形/レイヤー効果をあてるという加工ができるが、子ファイルである.psbは元ファイルのままなので画像劣化しない。また.psbを直接編集して保存すると.psdの方にリアルタイムに変化が現れる。 という説明であってるだろうか。文章にするとやたら冗長くさいが、やってみると実体ファイルとリンクされてるかんじがよくわかって扱いやすい。いろんな
その後、オタオタしつつソレぽいのをつくることができました。でもまだぜんぜんダメです。とても実用的とはいえない。とりあえず仕組みがわかったというヨチヨチ歩きです。これをやるにはLinuxサーバではむりっぽいと教わったので、今回、WindowsXPにApache/php/GDを入れてwwwサーバをつくりました。XPをサーバにするのは初めてやったのですが、ものすごくかんたんにできちゃうのでびっくりしました。msiのインストーラーでポンポン入れてくだけでつくれちゃうのですね。これは実験目的の暫定サーバなのでちょくちょく落ちるかもです↓ ココから頂いたスクリプトを(ThankYOU!)↓
Movable Typeをインストールして「いっちょうやるか」と新ブログをつくる。さいしょに目にするのがデフォルトのテンプレートだが、あれについてくるcssファイル、"styles-site.css" の構造はかなりわかりづらい。私はいつもアレをサッサと削除し、いちから自分で書く。そのほうがずっと効率がよい。 Movable Typeを入れてみたものの、あれを見て萎えるひとが意外に多いんだなというのをさいきん知った。あんなものいぢれなくてもだいじょうぶ。いちから書いていけばずっと短くてわかりやすいのが書けますよ。DreamWeaverが吐き出す恐ろしく長いjavascriptコードほどではないにせよ、あのcssは私もギョッとします。 Six Apart様がやることなので、"styles-site.css"にはなにか深淵な意味があるのだろう。きっと様々なユーザーのケースを想定し、行き着いた先
ブラウザで動作する軽快なチャットプログラムです。百聞は一見にしかず。 「ajaxってなんジャックス?」というベタなギャグをカマしている場合ではありません! ajax = Asynchronous JavaScript + XML Javascript + xmlにphpやcssを組み合わせてつくるエッジなウェブアプリケーションをさいきんはこう呼ぶらしいです。というわけでajaxの代表選手をひとつ入れてみたのでその紹介です。 Lace http://socket7.net/lace/ チャットするためのウェブアプリケーション。従来のリロードタイプよりもずっと軽快でFlashのチャットよりもカスタマイズ容易。ちょっと書き換えるだけで日本語も使えるようになりました。とりあえずデモをご覧下さいといいたいのですがその前にひとつ注意事項を。 【Laceのデモで遊ぶときの注意】 人に見られて困るような内
メールアドレスのチェックやurlのチェック等といった、ポスト入力された文字列のチェックはフォーム作成の基本であります。よく使う正規表現をまとめて、それぞれに大文字英数のキマリ名をつけといて、文字列とコミで関数に渡す。んで、エラーがあれば返すという機能です。エラーなしならスルーです。あらかじめ決められたキマリ名は大文字英数アンダーバーのみとします。たとえばメールアドレスをチェックしたかったらばこんなかんじで↓ return str_matching("yourname@yourname.com", "EMAIL"); とやると、メールアドレスが正しければ戻り値ナシ、間違ってれば、 メールアドレスの形式。例: yourname@yourname.com という文字列を返します。そのままエラー文字列として表示させたらべんりかなと。よくあるものばかりつけときました↓ NUM 半角数字のみ NUM_
Flashのアプリが吐き出すコードや、YouTubeその他の動画サイトからコピペしたマンマだとembedタグが入っちゃってます。embedは元々Netscapeに独自タグとして実装され、その後、公式にbanされたという悲しみのタグなのですね。 そのまんま使っても実害はないのだけれど、W3C様の掟に反するのでstrictなあなたは悶々とする。私はいつもこれをコピペして使ってます↓ <object data="" type="application/x-shockwave-flash" width="100" height="100"><param name="movie" value="" /><param name="wmode" value="transparent" />blah, blah</object> dataとvalueのところにswfへの絶対url("http://~")を
よくあるQ&Aのページが要るっていうんで、phpでつくりかけたんですが、1からつくってもいいんですけど、MTでやればラクやんかーと気づきました。レッツトライ! Movable Typeはひとつインストールしておけば、ブログをいくつでもつくることができます。FAQ集用の新規ブログをつくり、テンプレートをつくってみました。これからは以下のソースをコピペでポンすればスグにFAQページがつくれちゃう。らくちんらくちん。 FAQページをつくるテンプレート↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>FAQ PAGE ge
画像ファイル、mp3、pdf、ワード書類といった様々な拡張子のファイルをダウンロードさせたいときがあります。ブラウザで開くんじゃなくて、ダウンロードさせたいという。.htaccess に以下のように記述しとけばよいという話も出ますが、 AddType application/octet-stream .lzh .zip .mp3 残念ながらこの手はだめっぽい。IEが華麗にスルーしてくれます。php、perl等でcontent type headerを出力したほうがベター。ってわけでここにサンプルスクリプトがありました。Thank you!↓ これをやっとけば、ユーザーがpdfファイルをクリックしたときの、あの地獄の間を与えなくてよいという至福のユーザビリティが実現できますね。あれ、殺意を覚えますもん。世の中のすべてのpdfへのリンクがこれになっていたらば世界の犯罪は減ることでしょう。ラブ&
imagegif関数で生成したgif画像($temp_gif)があったとして、 $gif = file_get_contents($temp_gif); ってかんじで変数に格納し、 $gif_enc = base64_encode($gif); ってかんじでbase64形式にエンコードして、 echo "<img src=\"data:image/gif;base64,${gif_enc}\" />"; てかんじで画像に吐き出せるというのを本日教わりましたのでメモメモ。
このページを最初にブックマークしてみませんか?
『http://blog.3ot.net/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く