スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

私が使っているWindows7のノートPC「Panasonic Let’s note CF-J10」には、オリジナル機能で「クイックブートマネージャー」というものがあり、有効にするとWindowsの起動が早くなるそうです。

研究その3 起動時間 最短約9秒 | レッツノートJ ラボラトリー | パソコン(個人向け) | Panasonic

このパソコンにして1年ほど経ちますが、今頃知りました。。。

早速、この機能を有効にしてみます。
その前に、どれほど早くなるのか検証するため、ざっくりと現状の起動時間を計ってみます。
だいぶ使い込んでいるので、クリーンインストール時よりも起動は遅くなっているような気がしますが。今回、そこは気にしないものとします。
ちなみに、私のモデルはHDDモデルでCPUがCORE i3なので、シリーズの中では低スペックなほうです。

ここでは起動時間を「電源が完全にオフの状態からをオンにして、デスクトップのファイルが表示されるまで」としておきます。

1台のマシンにWindows XPとVistaのデュアル環境を構築する場合に、Vistaの後にXPをインストールするとVistaが起動できなくなるという問題が発生します。

原因としては、BIOSが起動時に読みに行くHDD上のMBR(マスターブートレコード)がXPにより上書かれ、Vistaの情報が見えなくなるためです。

逆にXPの後にVistaをインストールすれば、起動時にXPかVistaのどちらかを選択して起動することができます。これはVistaがマルチブート環境を構築できるしくみをもっているためです。

ここで、VistaがHDD全体をリフレッシュするリカバリディスクというような特殊な場合においては、VistaをXPとは別の空パーティションにインストールすることができないので、どうしてもVistaの後にXPをインストールせざるを得ません。

私も今回たまたまこのような状況に陥りました。資源のスリム化のためにどうしてもXPとVistaのデュアル環境を構築したい。さてどうしよう。
ちなみに実機は、パナソニック LET’S NOTE CF-R6 (CF-R6MW4AJR) Windows Vista版です。

10px程度の斜線の画像を用意し、それを背景に繰り返し表示してボーダー装飾しているサイトをよく見かけます。
今回、それを画像を用いずにCSS3だけで実現してみます。

まず、線形グラデーションを使ってラインを引きます。

 

25%、50%、75%のポイントで黒、白の両方を指定することで、グラデーションの境界を切り替えます。
クロスブラウザ対策で「-webkit-gradient」と「-moz-linear-gradient」を指定すると、CSSは以下のようになります。

最近ではWebサイトを構築する際には、「いいねボタン」や「ツイートボタン」を設置することが当たり前の時代になっています。

これらソーシャルボタンを設置した場合、iframeで公式サイトのコンテンツを表示するので、ボタンの形や色などデザイン・レイアウトを基本的には変更することはできません。
しかし、ほとんどの場合、デザイナはそのような事情を知らないため、結構な頻度で自由にボタンをレイアウトしてしまいます。

何もデザイナを悪と言っているわけではありません。デザインを優先してこそすばらしいサイトが仕上がるのは事実です。
ただ、そのことで、ソーシャルボタン配置の際に、技術的な難易度が上がることもしばしばです。

今回、Windows VistaプリインストールのノートPCにWindows XPをインストールします。

今更と思われるでしょうが、Webの業界でお仕事している関係で、まだまだVistaやXPというのは切っても切り離せない確認環境となっています。
私のメインマシンはWindows7ですが、今回、それに比べてもスペックが劣るノートPCに、VistaとXPのデュアル環境でもあれば、仕事上、非常に助かるということで、チャレンジしました。

実際に作業してみると、これが非常にめんどくさい。
忘れないようにメモとしてここに残しておきます。
同じような壁にぶつかった方に少しでもご参考になればと思います。

現状の環境と問題

まず、私の手元にあるのは
・Panasonic LET’S NOTE CF-R6(Windows Vistaプリインストール)
・Windows XP Professional SP2(正規ディスク)
です。

普通、デュアル環境を構築する場合は、古いOSが入っている状態で、新しいOSをインストールするという手順のようです。しかし今回は、Vistaのリカバリディスクだと、HDDを工場出荷時の状態にしてしまう、つまり、既存のOSを上書いてVistaを入れる事しかできないので、Vistaをインストール後にXPを入れる方法にチャレンジします。

Softbankを解約してから約2か月、それまで使用していたAndroid端末「HTC DesireⅡ」を捨てるのももったいないので、音楽プレーヤーなどとして活用しようと思い、引き出しの奥から取り出しました。

久しぶりに電源を入れてみると「サービス提供不可」の文字。ディスプレイロックを解除しても、それから先は何も操作できません。

調べてみると、HTC DesireはSoftbank解約から1か月後にUSIMが赤ロム状態となり、アプリやネットなどが全て利用できなくなってしまうようです。

Android端末本体の機種代は全て払ったのに、回線契約を解約したからといって、端末単体の全ての機能が操作できなくなるというのはなんだか腑に落ちませんが。

facebookの「いいねボタン」とOGP(Open Graph Protocol)タグについて、そこまで関心がありませんでした。しかし、ここ最近では無視できないような勢いでデフォルト化しているので、今更ですがここで改めて利用方法について確認しておこうと思いました。

いいねボタンについて、ボタンが押されたときに、情報が展開されるかどうかはOGPタグが正しく設定されている必要があります。

OGPタグが設定されていない場合、いいねボタンが押されても、何人がボタンを押したかのカウントが追加されるだけで、Facebookからの非リンクなどは期待できません。
一方でOGPタグを設定した場合、いいねボタンが押されたら、ボタンを押したユーザのタイムラインにそのページの情報が表示されます。つまり、その情報の元がOGPタグで設定した情報なんですね。

最近話題の「レスポンシブWeb」。
近年、スマートフォンの普及が加速して、Webの世界でもスマフォ最適化の必要性が叫ばれています。
そんな中、PCサイトとは別でスマホサイトを立ち上げる話はよくありますが、それよりも一歩先を見据えた考え方がレスポンシブWebです。
レスポンシブWebでは、PCやフマフォといった各端末において、HTMLソース1つで最適なインターフェースを提供するという考えがベースとなっています。(正確にはあらゆる画面サイズに対応する考え)

具体的には、まず画面サイズを取得して、画面の横幅に応じてスタイルを切り替える事で、さまざまなな端末に対してWebサイトを最適表示します。
説明するよりも実際に画を見てみると分かりやすいでしょう。以下のサイトでレスポンシブWebのサイトがまとめられています。
Media Queries

日本国内のサイトでは、まだあまり見かけませんが、海外のサイトではその例が着実に増えているようです。

IE6と格闘する日々は以前より少なくなりましたが、ここ最近はIE7やIE8の新たな問題に直面することが多くなったように感じます。

そこで「IE6のバグ、トラブル回避策」に続き、IE7のバグ、トラブル回避策をこのページにまとめます。

あと何年経てば、このIEの呪縛から解放されるんですかね。

HTML5+CSS3でデザインの表現の幅が広がりました。簡単なグラデーションや角丸ならCSSのみで表現できます。
しかし、検索を表す虫眼鏡やメールを表す封筒のアイコンなど、これらのイラストをCSSのみで表現するのはさすがに難しいです。
将来的に画像レスでデザインされたサイトなんて夢のまた夢なのかなと、そんなことを考えていたら、以下のようなサイトを発見しました。

Fontello – easy iconic fonts composer

こちらのサイトに掲載されているアイコンのイラストを、画像としてではなく、文字(ウェブフォント)として扱うことができます。

Monthly Archives