スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い ネタ元：PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い PHPのXSSとSQLインジェクションの解説が書かれています。丁寧に書かれていますのでぜひ一読ください。ただ、読む上で1点注意することがあります。 XSSはそれほど単純じゃない！ ネタもとのXSS対策済みのソースコードの１行目で次のようなコードがあります。 <form action="<?=$_SERVER['PHP_SELF']?>" method="get"> 実はここにもXSSの脆弱性が含まれています。次のようなURLでアクセスされた場合、任意のスクリプトを実行することが出来ます。 http://www.example.jp/ example.php/%22%3E%3Cscript%3Ealert(document.co
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
MTでopモディファイアを利用して複雑なレイアウトを行う
MTでopモディファイアを利用して複雑なレイアウトを行う MTのテンプレートでopモディファイアを利用して複雑なレイアウトを行う方法です。 例えば、エントリーの一覧画面で、商品画像掲載のページ構成CSSのようなエントリー3個づつをブロックレベル要素で包んで出力することなどが可能です。 基本的な使い方 まずは簡単なサンプルでopモディファイアの利用方法を説明します。 エントリーの変わりに数字を出力するテンプレートタグは以下のようになります。 <MTsetVar name="no" value="0"> <MTEntries> <MTSetVar name="no" value="1" op="+"> <mtgetvar name="no"> </MTEntries> 12345といった感じにエントリーの数だけ、数字をひたすら出力する記述です。 1行目でnoという変数に0を代入し、 <MTse
MTで特定の文字数以降を「...」とトリミングする方法
MTで特定の文字数以降を「...」とトリミングする方法 何文字以降は「...」と省略するのは、よくあるケースだと思います。 MTの場合、trim_toモディファイアを利用すれば何文字以降をトリミングすることは可能です。 また、何文字以上の場合にトリミングを行うと言う処理は、count_charactersモディファイアで文字数を取得しmtifで条件分岐することにより可能です。 合わせるとこんな感じ。 <mtentrybody strip_tags="1" count_characters="1" setvar="countbody"> <mtif name="countbody" gt="70"> <mtentrybody strip_tags="1" trim_to="70">... <mtelse> <mtentrybody strip_tags="1"> </mtif> 関連エントリ
alphafilter.jsが透過pngのロールオーバーに対応
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
JSONとJSONP
JSONとJSONP ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・ JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。 JSONの場合 JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。 var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} とJSONを定義しておけば、 for(var index in jsonData.users){ documen
「 rel=
「 rel="canonical"」で重複コンテンツ対策 Google,Yahoo!,Microsoftの検索エンジン3社が新たに「 rel="canonical"」のサポートを開始しました。 これは一つのコンテンツに複数のURLが存在する場合、どのURLが正規のURL（検索エンジンにインデックスして欲しいURL）かを定義するための属性です。 たとえば、to-Rでは http://blog.webcreativepark.net/tag-seo.html http://blog.webcreativepark.net/cgi/mt/mt-search.cgi?tag=seo http://blog.webcreativepark.net/cgi/mt/mt-search.cgi?tag=seo&blog_id=1 などtagページは同じコンテンツで複数のURLからアクセスできる仕様になって
YUIのfonts.css
YUIのfonts.css ブラウザ間やOS間のフォントの差異を吸収してくれるCSSライブラリにYahoo! Developer Networkで公開されているYUI(Yahoo! UI Library)の「fonts.css」があります。 利用方法は非常に簡単でhead要素などでfonts.css を読み込むだけで利用できます。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css"> Yahoo!のサーバー上のファイルを直接読み込んでも良いですし、ダウンロードしたファイルを読み込んでも大丈夫です。 fonts.css を読み込むとブラウザやOSは関係なく、font-familyは「Arial」、font-sizeは「13 px 」、lin
Movabletypeエントリー時の注意事項
Movabletypeエントリー時の注意事項 Movabletypeにエントリーの際に『改行設定』として「なし」と「改行を変換する」がある 『なし』はエントリーの内容に入力した文字をhtmlとしてそのまま出力する形です。 pタグでの段落設定、brタグでの改行をタグを入力する事により設定しないといけません。 『改行設定』はpタグでの段落設定、brタグでの改行を自動的にやってくれるものなのですが結構癖があります。 １、基本的にエントリー内容を段落として<p>タグで包んで出力します。 ２、通常の改行は<br />に変換して出力します。 ３、空行が発生するとそこを段落の区切りとして</p>タグと<p>タグを出力します。 ４、区切った部分にブロック要素が含まれる場合その部分はそのまま（改行設定なしの状態）出力される。 のような性質があります。 なれれば結構解りやすいのですが、なかなかどうしたものか。
9月に東京でPHP入門講座をやります。
9月に東京でPHP入門講座をやります。 9月20日（土曜日）に東京のサイバーガーデンbizで「ゼロからはじめるPHP入門講座」というンズオントレーニング講座を行います。 ［詳細・お申し込みはこちら］ PHPに興味がある方、勉強中の方を対象に、PHPの基礎や、MySQLとの連携、初心者がおちいりやすいセキュリティー問題、また、入門講座ではありますが、お問い合わせフォームや簡単なCMSなど実践的なサンプルをもとに進めますので明日から使える知識を習得できます。 講座内容 PHPの基礎知識 セキュア（安全）なPHPプログラミング PHPとMySQLの連携 データベースの利用にあたり注意すべきセキュリティ問題 お問い合わせフォームの制作 既存のWebサイトに設置できる簡単なCMSの制作 ［詳細・お申し込みはこちら］ 興味がある方はぜひおこしください。 スポンサードリンク to-Rについて JavaS
Feed登録者数が2000名を超えました。
Feed登録者数が2000名を超えました。 当サイトのフィード登録者数が2000名を超えました。 せっかくですので、これまでのFeed数の遷移を晒しておきます。 2006年5月 4日よりFeedBurnerを利用し測定しているのですが、2006年の後半から順調に増加しています。 参考：FeedBurnerでRSSの閲覧状況を把握する 途中で、今回の統計には含まれていない部分配信やカテゴリー別フィードも開始しましたので実数はもう少し多いです。 Feed登録者数はブログをがんばる一つの指標にしていたのでうれしいです。 次は5000名を目指してがんばりたいと思います。 参考エントリー Movable TypeでSEO対策-Feed編- MovableTypeでFeedの配信数を変更する カテゴリー毎にRSS配信を開始しました。 パブリッシャーバズで紹介していただきました FeedburnerがY
feed meterに参加しました。
feed meterに参加しました。 今さら感はあるのですが、blogのランキングがわかるサービス「feed meter」に参加しました。 さっそく本日から集計されていて、現在「100位」でランキングされています。 すごくキリがいいです。 前後に有名ブログがたくさんあって恐縮してしまいますが、ブログ更新のモチベーションアップに使わしてもらいます。 feed meterのランキングの基準は、 ☆のランキングは、RSS フィードの購読者数と、他の RSS フィードからそのサイトに張られているリンクの数とで計算されています。 計算方法は秘密ですが、「たくさんの人に読まれている」「あちこちの ニュースで話題になっている」と、人気度が上がります とのことですのでがんばってランキングを上げていきたいです。 サイドフィードさんのサービスは他にも面白いのが多いです。 track feedなんかは非常に便利
サイト内にウィンドウを開く「Prototype Window 」
サイト内にウィンドウを開く「Prototype Window 」 Prototype Windowはウェブサイト内にウィンドウを開く為のJavaScript ライブラリになります。 Prototype WindowはPrototype.jsを拡張するUIライブラリです。 また、「script.aculo.us 」のエフェクトも利用することが可能です。 利用方法 まずは、配布ページよりPrototype Window 本体をダウンロードします。 ダウンロードしたファイルからwindow.jsとprototype.jsをhead要素内などで読み込みます。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="window.js"></script> 次にテー
ブックマーク数付きリンクが簡単に作れるブックマークレット
ブックマーク数付きリンクが簡単に作れるブックマークレット ネタ元:ブックマーク数をタグ化して簡単にブログで使えるブックマークレット 便利そうだったので自分用に作ってみました。 ブックマーク数付きリンク作成 まずは、上のリンクを右クリックして『このリンクをブックマーク』とか『お気に入りに追加』なんかからブックマークします。 リンクを作りたいページでこのブックマークを選択すると左上にテキストフィールドが表示されます。 クリックすると全選択が可能なので『Ctrl』+『C』とかでコピーしてください。 それでブログに貼り付けると以下のように表示されます。 [to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信 関連エントリー パスワードを表示するブックマークレット リンク先のlivedoorクリップ数を表示するブックマークレット リンク先のはてなブックマーク数
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
Movable Typeのタグ入力を簡単にするtagSupportプラグイン
Movable Typeのタグ入力を簡単にするtagSupportプラグイン MTのタグ入力をサポートするtagSupportプラグインを作成しました。 タグ入力欄の下に、今まで利用したタグの一覧が表示されますので、今まで利用したことがあるタグはクリックで入力が可能です。 tagSupportプラグインをダウンロード ダウンロードしたtagSupport.zipを解凍し、tagSupport.plをmtディレクトリ内のpluginsにアップしてください。 ライセンスはGPLで配布しますので、自由にご利用ください。 MT4.1とFirefox2/IE7で動作検証は行っております。 不具合等ありましたらご連絡ください。 関連エントリー MTの編集画面にカラーピッカーを付けるcolorEditorプラグイン MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン Mo
[書評]CMSとして使うMovable Typeガイドブック
[書評]CMSとして使うMovable Typeガイドブック 小粋空間の荒木 勇次郎 さんとcrema designの黒野明子さんが書かれたMovable Typeのカスタマイズの本です。 MTの解説本に多いインストールから入るタイプではなく、基本的な操作方法から入るので初心者後半から中・上級者向けと思います。 見所は、3章の『CMSとしてのMovable Type』 内容は、 変数を利用したカスタマイズ コンディショナル・ブロックタグを利用した条件文の作成 テンプレートをモジュール化する という感じになり、MTのパワーを12分に発揮する使い方の解説がされています。 変数や配列、ハッシュ、条件構文や繰り返し構文などが、100ページぐらいにわたり、様々な使い方が丁寧に解説されています。 ここは、ホント重要だと思う。 プログラムで挫折したデザイナーさんなども、表示する対象がHTMLなのでわかり
MTカスタムフィールド画像を見えるようにする（正規表現）
MTカスタムフィールド画像を見えるようにする（正規表現） MTカスタムフィールド画像を見えるようにする（推奨）で解決したと思ったのですが、推奨の方法ではカテゴリーなどのカスタムフィールド画像が取り出せません。 どうしても取り出さなくてはいけなくなったので別の方法で対応しました。 regex_replaceモディファイアを利用して正規表現を使って取り出します。 <MTshopphoto regex_replace='/<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="([^"]+)">表示<\/a><\/span>/','$1'> shopphotoというカスタムフィールドから画像のURLのみを出力する記述です。 正規表現が汚くて気持ちが悪いところですが、ひとまず応急処置ということで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
