スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
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
Movable TypeとWordpressについて
Movable TypeとWordpressについて 最近はMovable TypeからWordpressへの移行がはやっているようですね。 [N] Movable TypeからWordPress移行の波がくる？ ブログをMovableTypeからWordPressに移行しました - trick7 ブログをMT(3.32)からWordPressに移行しました : akiyan.com 固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ 個人的にどちらも愛用しているのですが、どちらもよいCMSですよね。 ちょっと私なりにMovable TypeとWordpressの違いをまとめてみたいと思います。 Googleトレンド ネタフルさんでも利用されているGoogle トレンドでもう少しトレンドを分析してみたいと思います。 Movable Typeと
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字（半角）以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの
jQueryを使ったサンプルコード
jQueryを使ったサンプルコード ネタ元：一晩で覚えるjQueryの逆引き基礎サンプル7つ 色々書こうかと思ったらでぃべろっぱーず・さいどさんにほとんど書かれてる。。。 ですので、2サンプルほど 閉じる、開くボタンを同一の場所で交互にしたい ネタ元ですと、毎回ロードしてるけど同じデータなら最初の一回だけでよくないです? $(function(){ $("input[name='btn22']").one("click", function(){ $("#load1").load("./load.html"); }).toggle( function(){ $(this).attr('value','閉じる'); $("#load1").show(); }, function(){ $(this).attr('value','ローディング'); $("#load1").hide(); }
WEBデザイナーの為のXSS(クロスサイトスクリプティング)入門
WEBデザイナーの為のXSS(クロスサイトスクリプティング)入門 情報処理推進機構のXSS（クロスサイトスクリプティング/Webアプリケーションに存在するセキュリティホール）が公開されて、ネット上では盛り上げっているようです。 まぁ、これを機会にXSS(クロスサイトスクリプティング)って言葉をはじめて聞いたデザイナー・プログラマーの方は、正しい知識・正しい対処法を勉強しましょう。 とくにプログラムなんてちょっと改造するだけというレベルの、WEBデザイナーさんに注意してもらいたいです。 XSSはwebページにスクリプトを埋め込む攻撃法方法 XSSは別のサイト(これはどこでも良い)から攻撃先のurlに対して特定の文字列を送ることにより攻撃先のurlでスクリプトを実行する攻撃方法です。 XSS脆弱性のあるスクリプトはこんなスクリプトである。 <input type="hidden" name="
絶対に公開してはいけないPHPプログラミング
絶対に公開してはいけないPHPプログラミング ネタ元：AjaxMail：Ajaxを活用したフリーPHPメールフォーム これはひどいのに誰もつっこみを入れていないので、ツッコミを入れておきます。 セキュリティーフィックスされたました。 AjaxMailを利用しているサイトはスパムメールの踏み台にされます。 送信プログラムであるsendmail.phpの 150行目でPOSTで受け取ったアドレスをそのまま変数に入れて、 $reto = $_POST['email']; 168行目で直接メール関数に利用している。 if($remail == 1) { mail($reto,$resbj,$rebody,$reheader); } ありえない。 mail関数の第一引数には送信先のメールアドレスを設定できるのですが、カンマ区切りで複数のメールアドレスが指定できます。 リターンメールの性質上、リファラ
MTでコメントアウト
MTでコメントアウト MTのテンプレートが複雑になってきたら、適度にコメントを記述していくことをお勧めします。 Movable Typeにはコメントアウト用のタグとしてMTIgnoreタグが用意されているので、MTIgnoreタグを利用しコメントの記述を行うことが可能です。 MTIgnoreタグ内に記述されている内容は出力時に全く評価されません。 <MTIgnore><!--カテゴリが空の際の処理--></MTIgnore> MTIgnoreタグ内にhtmlのコメントアウトを記述しているのは、多くのテキストエディタなどでhtmlのコメントアウトの箇所の強調表示色が変わる為です。コメントが多いソースは作業している際に安心するので。 MTIgnoreタグはブロックレベルで指定できるので、「ひとまず消しといて」というう素敵なオーダーにも簡単に対応できます。 <MTIgnore> <MTEntri
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン
MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン MTのテンプレート開発で再構築の工程が非常に不満だったので、テンプレート開発中は再構築を不要にするプラグインを作成しました。 以下のような条件で開発している方用のプラグインです。 ダイナミックパブリッシング環境で開発 テンプレートのファイルリンク機能を利用して開発 ダイナミックパブリッシング環境で開発 スタティックな環境で開発している方も多いと思いますが、あまり効率が良いとはいえません。 ダイナミックパブリッシング環境で開発を行えば、再構築の作業を行わなくてもブラウザで確認を行うことが出来ます。 参考：MovableTypeにダイナミック・パブリッシングを設定する テンプレートのファイルリンク機能 MTのテンプレート管理画面でテンプレート管理画面で開発している方も多いと思いますが、これもあまり効率が良いとは
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
MovableType3.34から4.01へのアップデート
MovableType3.34から4.01へのアップデート MovableTypeも4.01と若干安定したと思いますのでアップデートを行いました。 当初、別のディレクトリで新規にMovableTypeを構築して既存のMovableTypeよりデータを移行、その後ドメインを新規のディレクトリに向けるという作業を行おうと思ったのですが(この方法が一番安全にサイトを停止せずにアップデートできる為)、MobaleTypeの3.3はurlとtagのエクスポートができないようです。 urlはタイムスタンプより生成しているので問題ないのですが、tagを手動で再設定は非常にめんどくさいので、既存のMovableTypeを直接アップデートしました。 ディレクトリのバックアップ FTPでMovableTypeをインストールしているディレクトリにアクセスして、すべてをダウンロードします。 DBのバックアップ M
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
角丸javascriptライブラリ『curvyCorners』を使ってみる
角丸javascriptライブラリ『curvyCorners』を使ってみる 角丸javascriptライブラリ『curvyCorners』を使ってみました。 配布サイトからダウンロードしてきてrounded_corners_lite.inc.jsファイルをheadで読み込んでください。 <script type="text/javascript" src="rounded_corners_lite.inc.js"></script> 次にbodyに角丸にしたいblock要素をclass属性を付けて配置します。 <div class="myBox"> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> </div> これで準備はO
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
