JavaScript初学者の壁
JavaScript初学者の壁 会社を作ってからいくつかの企業でフロントエンドの社内トレーニングや新卒研修、技術メンターなどをしており意外と「JavaScript初学者の壁」でつまづいている方が多いことに気がつきました。 JavaScript初学者の壁とは？ JavaScript初学者の壁でつまづく人との特徴として以下の様な状況にある人が多いように感じます。 JavaScriptを覚えたい 入門書やネット上の情報で基本は学んだ 業務ではJavaScriptをつかっていない このタイミングでは簡単なものでも思い通りに作るのはむずかしく、かといってどうやって学んでいけばよいかの道筋も見えなくなり、学習がストップしてしまいます。 ちなみに、本記事はそれ以前の「入門書を読んでもわからない」という方は対象にしておりません。恐らく入門書の浮気ができていないと思われるので「これからjQueryを始める方
スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「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
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
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
jQueryのコードを良くする5つのTIPS
jQueryのコードを良くする5つのTIPS 5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selector').attr('alt'); 「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。 $('selector').data('meaningfllname', 'this is the data I am storing'); // then later getting the data with
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個以内にしましょう。 ディレクトリの
ブロックレベル要素の高さを揃える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で画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
displayプロパティを初期値に戻す為のJavaScript
displayプロパティを初期値に戻す為のJavaScript table要素やtr要素などはブラウザ毎にdisplayプロパティが異なる為、何かいい方法はないかといろいろ試行錯誤していたら面白い事を発見しました。 document.getElementById(element).style.display = '' このようにdisplayプロパティに空欄を代入すると、displayプロパティが初期値に戻ります。 サンプル Firefox2とIE6で確認しました。 かなり便利そうです。 関連エントリー リンク先のはてなブックマーク数を表示するブックマークレット ie以外でもクリップボードが使えるsetClipboard.js 一番簡単な画像置換の方法-imageReplace.js- アルファ画像を扱うalphafilter.jsライブラリ javascriptで文字にドロップシャドウを
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
そろそろPHPの良いところも一言いっておくか
そろそろPHPの良いところも一言いっておくか ちょっとはやってるので便乗ネタ。ちゃんとPHPにも良い所がありますよ。 技術者の数が多い うちの会社では、ほぼすべてのシステム(Webアプリですよ)をPHPで運用してるんですけど、最大の理由は求人をかけた際にPHPしかできないって言う人がほとんどだからです。 (Perlできる人は、ほとんどはPHPもできるし) 当然、求人なんで場所や条件、社風など様々な原因があるのですが、大阪は年々その傾向が強くなってるように感じます。 システムの保守管理などを長期視野で見ると、どうしてもPHPで開発って形になる。 習得が容易である これは重要です。 (ある程度)使える人を育てるのが容易です。 人手不足の時に限って、求人をかけても未経験者しか来ない。 PHPは、習得が容易である為 (ある程度)度教えたら、(ある程度)使えるようになります。 ボクが社内で開発はPH
Livedoor Readerを薦める理由
Livedoor Readerを薦める理由 ボクはLivedoor Readerを使っているのですが、すごくお勧めなので、お勧めのポイントをまとめます。 ASP型RSSリーダーである これはLivedoor Readerに限ったことではないのだけれど、家と会社でブラウジングする環境にいるので、インストール型はちょっと使いづらい。 自分の購読しているフィードを公開できる ちょっと前に実装されて気に入っている機能なのですが、自分の購読しているフィードを公開することができます。(kazumanishihataの購読フィード) 共有することは大事だと思う。 さらに『公開フィードのフィード』なんかもはいて貰えるとうれしい ヘッダーが消える 多分、非公式ショートカットだと思うのですが『shift』+『z』でヘッダーが消えます。 2回押せばフィード画面のみになります。 ノートでブラウジングしているのでこ
MovableTypeにタグクラウド(SEO対策済み)を設置する
MovableTypeにタグクラウド(SEO対策済み)を設置する ブログのリニューアルをおこなったのですが、ついでにタグクラウドを設置してみました。(右メニューの一番下に設置してます。) 普通に設置しても面白くないので、SEOをふまえたタグクラウドにしてます。 タグクラウドを設置する利点 blogのエントリーを通常のカテゴリーとは別に、汎用性のある分類を行うことができます。 例えば、最近このblogでは『Twitter』に関する話題を取り扱うことが多いのですが、カテゴリーを作るほどではありません。 そんな場合『Twitter』のタグを設定しておけば、『Twitter』に関するエントリーの一覧を作ることができます。 参考：Twitterのタグページ また、SEO上も有効で、タグでキーワードを設定すれば、そのキーワードの専門ページが1ページ作成されることになります。 基本的な設置方法 テンプレ
SEO対策ツールまとめ[to-R]
SEO対策ツールまとめ よく使うSEO対策ツールのまとめ。 他にもいっぱいあると思うけど個人的に愛用しているもののみピックアップ。 キーワードアドバイスツールプラス Yahoo!JAPANでキーワードが何回検索されたか調べるツール(2007年4月時点のデータ) キーワード出現頻度解析 そのページにおけるキーワードの比率を計算できるツール。 検索エンジンランキングチェッカー 検索エンジンでの順位をチェックできるツール。 何がすごいかって言うと検索結果が記録されていきます。 Google, YST キーワードチェックツール GoogleとYSTの辞書にキーワードがどのように登録されているかチェックするツール。 XML Sitemap Generator Google sitemapを自動で作ってくれるツール Statsaholic 今までのAlexaの順位遷移を比較できるツール robots.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
