JavaScript｜WEB制作・WEB開発のTips＆News Kamimoto.biz Labs

2009年10月23日

今年の下半期のWebデザインのトレンドは、確実にこれでしょう。

ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトです。

ということで、まずはサイトから。

可変グリッドレイアウトなサイト

• 小林聡美.jp
• Marunouchi.com

前者は面白さがありますよね。
あと、後者は、あの中村勇吾さん率いるtha ltd.さんが制作です。

可変グリッドレイアウトを実現するための日本語ライブラリ

私もこうした大それたタイトルのブログを書いてますが、別にプログラマーではなくて、ただのディレクター・プロデューサーです。

なので、「コードを書けないけど、どうにかしてサクッと作りたい」と考えてしまいます。

そんなときのライブラリ。

可変グリッドレイアウトのjQueryプラグイン書いたよ

これは、便利ですね。
サンプルの6番目は、消去もできるようになっています。

• jQuery
• グリッドレイアウト
• トレンド
• プラグイン

2009年10月 3日

Web制作・開発のための今日のブックマークです。

今日は、JavaScriptとウェブデザインのブックマークを1つずつです。

・実践JavaScript - 株式会社ALBERT 社内勉強会資料
JavaScriptの資料。

基礎の部分の目次を引用してみると、

1. JavaScriptを実行する
2. scriptとonclick
3. JavaScriptとEvent
4. DOM Events

こんな感じ。

非常にいい資料です。
勉強になります。

・単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル

ウェブサイトのカンプの土台に対して、詳細な部分をブラッシュアップしていく方法の解説。

• JavaScript
• デザイン

最近、twitterが日本でも流行っています。

あと、個人的にも、twitterのサイトとしての1発目である「twitterデザイン集【ツイッテーマ】」を9月末に公開しました。

さて、twitterには、自分が一方的につぶやいていくという以上に、ゆるいながらも他人とかかわることが楽しみの1つでもあります。

返事をする（reply）以外の代表的なものとして、「RT」があります。

RTとは、「retweet」のことで、つまり誰かしらのメッセージをそのまま転送してるという意味です。

そのRTによって、twitterは非常に伝播力のあるWebサービスになっています。

それをブログ記事に入れる方法をご紹介します。

通常のリンク

普通にリンクを張るというのが、JavaScriptを読み込んだりもせずに一番簡単です。

<a href="http://twitter.com/home?status=RT @「twitterアカウント名」 「RTさせたい内容」">RTする</a>

これが、何もしなくてもいいので簡単です。

こんな感じ。

リンクでRTさせる

本文中にJavaScriptを読み込ませる

TweetMeme Button

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

ボタンも勝手に表示されますので、簡単です。
ただ、document.write()で行っているので、SEO的なものはなくなりますね。

こんな感じになります。

リンク先などを指定できる

このブログでもこちらを使用しています。
現在のところ、これが、一番だと思います。

John Resig - Easy Retweet Button

まず、headタグ内に、jsのソースを読み込ませます。

<script src="http://ejohn.org/files/retweet.js"></script>

その後、bodyタグ内に、下記のような形で書き込みます。

<a class="retweet" href="http://labs.kamimoto.biz/web-service/twitterrt.html">RT @tkamimoto: twitterへRTしてもらうソース・ツールの類</a>

Movable Typeの各エントリーに入れるのであれば、こんな感じですね。

<a class="retweet" href="<$MTEntryPermalink$>">RT @twitter: <$MTEntryTitle$></a>

このボタンのデザインが、もう少しかっこよかったら最高なのですが...

• RT
• ReTweet
• twitter
• ツイッター

2009年9月 6日

webでは、今も昔もポップアップを使いたくなるときがあります。

今回、ちょうどよさげなのがあったのでご紹介。

jQueryで作るポップアップウィンドウ「prettyPhoto.js」

今回は、モバイルデザインアーカイブのお問い合わせで、iframe版を使用しました。

「サイト掲載依頼」を選択し、表示される『モバイルサイトのデータをアップロードいただけます。』をクリックしてください。

lightbox風の表示で、別のファイルをiframe表示してくれます。

導入は簡単です。

下記のように、jQueryとprettyPhoto.js、CSSを読み込み、prettyPhoto用のスクリプトを読み込みます。

今回のiframeは下記のようなソースになります。

Google.com

• jQuery
• prettyPhoto
• ポップアップ

jQueryとprototype.js を同時に使う際は、ときどきあるかと思います。

jQuery、Prototype.jsともに、書式が似てるために競合（コンフリクト）してしまいます。

たとえば、こんな感じです。

$('id_name');

これを解除するために、jQueryの $(); を違う名前に変えて使用します。

通常、headタグの中に下記を読ませますが、その際に2行JavaScriptを追加するだけです。

読ませる順番も、Prototype.js、jQuery、コンフリクト回避のスクリプトの順になります。

• Prototype.js
• jQuery

今回、仕事で、jQueryでのtableの行の表示・非表示を行ったので、それのメモです。

JavaScriptのソースは下記です。

クライアント案件でも結構出くわしますよね。知ってると便利です。

$("#radio01").click(function() {
    $("#row").show();
});
$("#radio02").click(function() {
    $("#row").hide();
});

• JavaScript
• jQuery
• table
• tr

2009年8月16日

ここ最近、日本でも一気に、twitterが流行ってきました。

そこで、twitterもやり、さらにブログを書いてると、自分のブログのエントリーをRTしてほしくなると思います。

そう、エントリーへのリンクとエントリータイトルがtwitterにすぐポストできるようなJavaScript。

そういう便利なJavaScriptが公開されていました。

John Resig - Easy Retweet Button

設置は簡単です。

まずは、自分のサイトのheadタグ内に、

<script src="http://ejohn.org/files/retweet.js"></script>

を記述し、JavaScriptを読み込みます。

そして、

John Resig's Blog

など、class名「retweet」をつけたa要素を記述してあげるだけです。

ちなみに、縦配置にする際は、

John Resig's Blog

などになります。

これは、けっこう便利ですね。

また、Movable Typeに入れるときは、下記のようなタグをエントリーアーカイブのテンプレートに入れればOKです。

<a class="retweet" href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>

早速、モバイルデザインアーカイブの政党特集で使ってみました。

けっこういい感じですよ！

• JavaScript
• Movable Type
• retweet
• twitter

2009年6月19日

Web制作・開発のための今日のブックマークです。

・「アドビ vs Web標準」の決着はどうなる
読む価値ありです。

それでもFlashの重要性の低下は不可避だ

・Flashを応用して便利にファイルアップできる「SWFUpload」のjQueryプラグイン
jQueryでいけます。

・[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
きれいなナビゲーション。

・さらなる"ユーザー中心設計"を目指すために ［最終回］
今年の下半期のWeb業界のテーマは、UI・IAになるんではないかと思っています。

• Adobe
• Flash
• jQuery
• アップローダ

2009年6月 1日

Web制作･開発のための今日のブックマークです。

・[JavaScript] JavaScriptでよく使う書き方。
正規表現。

・クオリティーの高いフリーのグランジテクスチャ10
ためになります。

・ 名刺にメールアドレスではなくWaveアドレスを書く時代がすぐそこに？
そのためには、Googleのシェアを日本のIT従事者以外の一般人にも広める努力がより一層必要かなと。

• Google
• JavaScript
• 正規表現

2009年5月28日

Web制作･開発のための今日のブックマークです。

・CSS Nite in Ginza：復活して10回が経過しました
Web制作者向けセミナーの参加者アンケートのシェア。

・アイデア溢れるロゴデザインのインスピレーション集「36 Clever and Creative logo」
こういう類では、アイデアプラステンという書籍がお勧めです。

アイデアプラステン

アイデアプラステン（2）

・あらゆるサイトのカラーにあうフリーのアイコンがダウンロードできる -Iconza
アイコンいっぱい

・これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」
jQueryライブラリ！すごいです！！
こんな感じです　→　jQuery Ribbon

・自分の内に秘めた「すごい可能性」を解き放ちたい人のための一冊
プロデュース力。自分の能力をプロデュースする必要がある。

・CSS3はここがすごい【1】：CSS 3分コーディング
そろそろCSS3。

・若い時にプログラムを書こう，必ず人生の豊かさにつながる

Webの世界でもプロデューサー、ディレクターこそ、必要。

問題意識として、まだまだ真水の部分が足りないです。当たり前のことを言いますが、自分たちで作らないと自分たちで改善できない。頼んでいる限り改善はできない。

人生のどこかでプログラムを作る仕事を経験した方が絶対に面白い。一生やれと言われると少し考えるけれど。20代あるいは30代の前半くらいまでに真水の仕事をどれだけやったか、その後の人生の豊かさにつながります。

我々の役目はITのシェルパみたいになること。このブリザードの中でも、お客さんと一緒にいる。ブリザードだから俺たちだけでこの山は下りますね、という訳にはいかない。

・Google Bets Big on HTML 5: News from Google I/O
html5のお話。

・FlashLite1.1で制作時のつまづきポイント3点
携帯Flash。

• Google
• JavaScript
• html5
• jQuery

こちらで紹介してるWEB制作・WEB開発は、各種サービスサイトでご相談ください。各種ライブラリ（Prototype.js、script.aculo.us、jQuery）によるAjax開発、Movable Typeサイト制作のサイトへぜひ一度アクセスしてみてください。

• サイトマップ
• お問い合わせ
• ホームページ制作
• Web制作アイデア
• HTMLコーディング
• SEO
• SEO対策情報ブログ
• ウェブデザイン
• twitterデザイン
• twitterサービス
• twitter情報
• 動画まとめ