2009年10月の記事一覧｜WEB制作・WEB開発のTips＆News Kamimoto.biz Labs

18:17 そろそろ恵比寿へ向かいます～
19:26 Tweetup、ヒト多いです！外国の方も多くいらっしゃいます
19:34 ハッシュタグ #twup09 っす。とりあえず、唐突乾杯なう。w
19:36 CGの小鳥かわいい！
19:38 twitter は、実はサイドプロジェクトだった。失敗は、成功の元。#twup09
19:43 会場で赤ちゃん号泣なう。#twup09
19:50 ハッシュタグは、#twup09 ですよー RT @mainichijpedit: ビス・ストーンさんが登壇です。まずはツイッターの歴史について。「私は、１０年間ブロガーの企業などをしていました。まずはこれまでを、そして最後にこれからのツイッターお話しをします」 #TT09F
19:52 共同創業者ビズ『技術の勝利ではなく、人間性の勝利』 #twup09
19:59 twitter は、豊富で多様性のあるエコシステム #twup09
20:01 ビズさん『携帯はtwitter に重要。したがって、日本重要！』 #twup09
20:03 『ちょっと待て』の裏話を勝間さんが RT @kazuyo_k: twitterイベント、 @bizさんの日本語のリハーサルはいちおう、ちょっとだけ手伝いました。 #twup09
20:30 飯野賢治さん、ニアミスなう。#twup09
20:58 日本のtwitter 開発のお二人でお話なう。ローカライズ以外にも、日本酒独自の仕様開発もけっこう多いらしい #twup09
20:59 お話おもしろかったですね RT @starexp: #savemothers @UNFPA_Tokyo さん、フォローさせていただきました。頑張って下さいね。
21:05 勝間さん、登壇なう。 #twup09
21:10 広瀬香美さん、ビデオレターなう。歌うのは、事務所ストップw #twup09

イベントの感想

かなりおもしろかったです！

外国人のスピーチはおもしろい。
そして、昨日は、聴衆のノリがよかった。

なんか、ジョブズのスピーチみたいだった。

iPhone発表のやつみたいな感じ。

共同創業者のビズさんのスピーチの要点を改めてまとめます。

技術の勝利ではなく、人間性の勝利
twitter は、豊富で多様性のあるエコシステム
携帯はtwitter に重要。したがって、日本重要！

あと、日本のtwitter 開発のお二人と直接お話ししました。ローカライズ以外にも、日本独自の仕様開発もけっこう多いらしいですよ。

当日、NHKが来てたのですが、NHKの「おはよう日本」のtwitter特集に微妙に映ってました（笑）。

少し恥ずかしいっす...

Web制作・Web開発情報のタグ

2009年10月16日｜コメント（0）｜トラックバック（0）

カテゴリー：セミナー・イベント

携帯サイト、多言語サイトなどを運営する時のmetaタグ

2009年10月 9日

RT @tkamimoto: 携帯サイト、多言語サイトなどを運営する時のmetaタグ

めったに使用しないので、よく忘れるタグです。
なのでメモ。

本体のサイトがすでにあり、それの代替サイトとして、携帯サイト・多言語サイトなどを運用するケースがあると思いますが、その時に、「携帯サイトはこのURLです。」「英語サイトはこのURLです。」と指定してあげることで、検索エンジンのクローラーには少しでも教えてあげることができます。

今回、twitterデザイン集【ツイッテーマ】の英語版：Twitter-Themes.JPを立ち上げたときに思い出すのに苦労したのでメモです。

link要素のalternate属性を指定し、その他、言語であったり、サイト名、URLを指定してあげます。

Web制作・Web開発情報のタグ

2009年10月 9日｜コメント（0）｜トラックバック（0）

カテゴリー：HTML

モバイルWebkitをエンジンとしているブラウザの比較表

2009年10月 8日

RT @tkamimoto: モバイルWebkitをエンジンとしているブラウザの比較表

モバイルWebkitをエンジンとしているブラウザの比較表をご紹介。

モバイル版Webkitをレンダリングエンジンとしているブラウザは、多くのスマートフォンで搭載されていて、代表的なものとして、iPhoneに実装されているモバイルSafariが挙げられるわけですが、それらの表示を実際に試してみた表みたいです。

The Great WebKit Comparison Table

今回、19種類のWebkitエンジンのブラウザ上で、CSSやJavaScriptに関する様々なテストを行ったようです。

その結果、結論として出てきた言葉。

There is no "WebKit on mobile!"

つまり、『モバイルには「Webkit」なんてものは存在しない！！！』らしいのです(笑)

このページの下部には、「どのブラウザが一番多くのテスト項目をパスしたか」の棒グラフも載っているので、こちらも見るのも興味深いです。

代表的なものの優劣だけ列挙すると、上からこのような順番になります。

Safari4
Chrome3
Chrome2
iPhone3.1
Chrome1
iPhone2.2
Android G2
Android G1

個人的には、Androidの順位の低さが残念です。。

Web制作・Web開発情報のタグ

2009年10月 8日｜コメント（0）｜トラックバック（0）

カテゴリー：Android, カテゴリー：iPhone, カテゴリー：ブラウザ, カテゴリー：モバイル

適切なマークアップ

2009年10月 5日

RT @tkamimoto: 適切なマークアップ

コーディングする上で、重要な要素は多くありますよね。

結果という点で見れば例えば下記。

ファイル容量の軽さ
アクセシビリティ
SEO

技術的に必要なものとしては下記とか。

(X)HTML
CSS
JavaScript
PHP

ただ、ここでまず大事なのは、適切なマークアップをできるかどうかです。

それ以外は、あくまでも知識に依存するのですが、マークアップ自体は、構造を正しく理解するなど別の要素が求められるからです。

たまたまダメな例が見つかったので、ご紹介。

仮想化などビジネスクラウドベンダーの会社のサイト。


    ・システムが複雑化・硬直化して、マーケットの変化に対応しきれていない
    ・システムの運用管理コストが以前より増えている
    ・人的エラーによるセキュリティリスクが増大している
    ・リソースが有効に使われておらず投資対効果があがっていない
    ・業務アプリケーションのピーク負荷の予測が困難だ
    ・障害に対する事前予防がなされていない
    ・各種規制対応、コンプライアンス強化に追われている

li要素の中に「・」を書くという、まったく意味不明のマークアップです（笑）。

これをコーディングした人は、おそらく、li要素がどういう意味付けなのかを理解していないのでしょうね（笑）。

li要素は、順不同のリストを表します。
したがって、「・」はリストの内容自体を表現していないので、不要です。

これらの部分は、CSSで定義すべきです。

続いて、dl要素について。
「新日鉄ソリューションズの特徴」というページ。

・NSGUD

グリッドユーティリティ技術を生かした、より良いITインフラ構築のためにNSGUD（NS Solutions Grid Utility Designer's Club）を発足し、実際のユーザーニーズを反映しながら検証を実施していくスキームづくりを推進しています。有力なユーザー企業の事例紹介、お客様のIT資産の共同検証をはじめ、関連セミナーなどの情報発信活動、海外の最新動向の共同視察、各種交流会の開催などの活動を行っています。

これは、見出しとデータのセットを箇条書きにしているコンテンツです。
したがって、dl要素でマークアップすべきですね。

このサイトをコーディングした人は、ちょっとやばいですねｗ

結局一番大事なのは、Webサイトの内容をしっかりと理解することです。
コンテンツの内容を理解して初めて、その文章が何を表しているのかを考えてから、マークアップすることができるようになります。

そして、それがアクセシビリティ、SEOにもつながります。

Web制作・Web開発情報のタグ

2009年10月 5日｜コメント（0）｜トラックバック（0）

カテゴリー：HTML

IE6 No Moreの使用

2009年10月 4日

RT @tkamimoto: IE6 No Moreの使用

今回、twitterデザイン集【ツイッテーマ】を公開するにおいて、ちょっと考えたのが、Web屋にとっての天敵Microsoft Internet Explorer 6への対応です。

クライアントワークでは、対応せざるを得ないのですが、ツイッテーマのような趣味のサイト（＝プライベートワーク）の場合、正直、もう対応しなくてもいいかなと思っています。

そこで、今年、Web制作会社が公開した「IE6 No More」を使いました。

日本語版は、こちらから確認することができます。

IE6 No More code-samples

ソースはこんな感じです。

<!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>Stai usando un browser obsoleto</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>Per una migliore navigazione su questo sito, per cortesia passa ad un browser di ultima generazione.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.mozilla-europe.org/it/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=it' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='width: 73px; float: left;'><a href='http://www.apple.com/it/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome?hl=it' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->

実際に、IE6で見るとこんな感じになります。

IE6 No More 日本語エラー画面

今後、趣味のサイトは、IE6は放置プレーする方向で行きます。

IE6に最適化する時間があれば、何か作った方が自分にも、世の中のためにもなると思うので。

Web制作・Web開発情報のタグ

2009年10月 4日｜コメント（0）｜トラックバック（0）

カテゴリー：HTML, カテゴリー：アイデア, カテゴリー：ブラウザ

JavaScriptとウェブデザインのブックマークを1つずつ（20091003）

2009年10月 3日

RT @tkamimoto: JavaScriptとウェブデザインのブックマークを1つずつ（20091003）

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

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

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

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

JavaScriptを実行する
scriptとonclick
JavaScriptとEvent
DOM Events

こんな感じ。

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

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

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

Web制作・Web開発情報のタグ

2009年10月 3日｜コメント（0）｜トラックバック（0）

カテゴリー：JavaScript, カテゴリー：Webデザイン, カテゴリー：今日のブックマーク

twitterへRTしてもらうソース・ツールの類

RT @tkamimoto: twitterへRTしてもらうソース・ツールの類

最近、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>

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

Web制作・Web開発情報のタグ

2009年10月 3日｜コメント（0）｜トラックバック（0）

カテゴリー：JavaScript, カテゴリー：WEBサービス

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