8/31/2010

Mac の Dashboard を再起動する

今、Dashboard の計算機を使おうとして起動したけど、いくら計算機をクリックしても active にならない。うーん、と思って他の Widget も見てみると、カレンダーの日付は昨日のままだし、時計も明後日の方向を指していた。辞書 Widget も active にならないから、こりゃ Dashboard がお亡くなりになってると思い、再起動しようとした。しかし、Finder は Mac 3 点押しの command + option + esc で強制終了メニューから強制終了させられるけど、Widget はできない。Dock の Widget アイコンの右クリックでもそんなメニューは出てこない。

ということで、「アクティビティモニタ」の出番。

★「アクティビティモニタ」の場所
起動ディスク -> アプリケーション -> ユーティリティ -> アクティビティモニタ


★Dashboard の再起動
  1. アクティビティモニタを起動する

  2. 「プロセス名」という欄に「DashboardClient」というのがあるので、その行をクリックする

  3. 左上にあるデカい赤アイコンの「プロセスを終了」をクリックする

  4. 表示されるダイアログの「終了」を選択すると、勝手に再起動する



Dashboard を再起動したので、今は普通に動いてるみたい。

8/28/2010

携帯電話用に Google が勝手に変換するのを防ぐ

せっかく携帯版ウェブサイトを作って、パソコン版のトップページに携帯電話からのアクセス振り分けを仕込んだとしても、携帯版の Google から表示すると、携帯サイトへジャンプしない。Google が勝手に携帯電話用に変換してしまっている。確かに便利な機能ではあると思うけど、こうやってせっかく仕込んだ振り分けが機能しないのは実に困る。そこで、下記のたった 1 行をパソコン版ウェブページの <head> 内に記述するだけで、これを回避することができる。

下記は www.xxx.com というパソコン版のウェブページに、携帯版のウェブページである www.xxx.com/m/ へジャンプさせる場合。

<link rel="alternate" media="handheld" href="http://www.xxx.com/m/">

8/20/2010

Widget で設定情報などユーザに選択させたデータを保存する/読み込む

昨日、widget でユーザに選択させた項目を保存、読み込むという記事を書いたけど、他の widget では cookie を使っていなかった。デフォルトで装備されている Weather という Widget の中身を見ていくと、データを別の保存、読み込み方法で制御していた。

デフォルトの Widget でこの手法を使っているので、おそらく cookie ではなくこちらが主流なんだろうと思い、昨日のエントリーは「cookie を使いやすいように読み込む」というタイトルに変更しておいた。併せて、widget 関連エントリーではなく、単なる cookie を連想配列に突っ込むというエントリーへと変更した。

さて、widget でのデータの保存、読み込み方法は、とても簡単にできていた。

★保存
「keyword」という項目名で、内容が「xxx」のデータを保存
widget.setPreferenceForKey("xxx", "keyword");


★読み込み
「keyword」という項目名のデータを変数 key に格納
var key = widget.preferenceForKey("keyword");


たった 1 行でできる。cookie よりも実にシンプルに管理できる。

リンクチェックには Opera が便利

レイアウトやらの確認を含まず、ただリンクのチェックをしたい場合は Opera が便利だと思う。Opera はデフォルトでマウスジェスチャー機能が備わっており、それを使うことで簡単に戻る、進むの動作をできる。

  • 右クリックしながら左に動かす
    →戻る

  • 右クリックしながら右に動かす
    →進む

  • 右クリックしながら左クリック
    →戻る

  • 左クリックしながら右クリック
    →進む

もちろん、Firefox でもアドオンでできるけど、デフォルトでできるというのは素晴らしい。Opera は覚えている限りでも 7 年くらい前からできていた。

8/19/2010

cookie を使いやすいように読み込む

cookie の読み込みに関して検索してみると、cookie 文字列で使用する ; や = の位置を調べて値をチョン切って使うみたいなことを書いてあるページもあったが、split() を使えばもっと簡単に、連想配列を使えばさらに簡単にデータを使える。

下記では init() という function で cookie を連想配列 cookies に突っ込むことをしている。

function init() {
// 連想配列 cookies をクリア
  cookies = [];
// 変数 cookieItems に、cookie を ; ごとに区切って格納
// これで 1 項目づつに区切られる
  var cookieItems = document.cookie.split(";");

  for (var i = 0; i < cookieItems.length; i++) {
// 変数 thisCookie に 1 項目を = ごとに区切って格納
// これで 1 項目内の項目名と値を分けて格納する
    var thisCookie = cookieItems[i].split("=");
// cookies に項目名と値を同期させながら格納
    cookies[thisCookie[0]] = thisCookie[1];
  }
}

Mac の Dashboard の Widget から Safari でウェブページを開く

widget を作成する際に、Safari で URL を開くこともあると思う。このとき、location.href や window.open では開くことができない。標準で付いていたものだったと思うけど、Google という widget の中身を見てみた。この widget 内のボックスに入れてボタンを押すと Safari で結果を表示するので、おそらくやり方が書いてあるだろうという推測があった。で、やり方はこんな感じ。

★Javascript
if (window.widget) widget.openURL (url);


ここで出てくる widget は、Dashcode で作成する際には既に定義されているので、url の部分に値を入れるだけで処理してくれる。

8/14/2010

php で携帯用に画像を自動で画像を縮小する

携帯版ウェブサイトは、表示できる 1 ページの容量がパソコン版に比べ大幅に制限されているため、画像がデカ過ぎたりするとそれだけでぐんにょりした感じになってしまう。なので、画像がデカい場合は自動で縮小し、表示できるようにするという、パソコン版ではあまり想定しないような配慮も必要となる。

そこで、php でページを自動生成する場合、自動で縮小をする処理を書いておけば大方回避できる。下記は一例として、ファイル名からサイズを取得し、100000 bytes 以上の場合に縮小画像を生成し、表示するものを書いてみる。縮小サイズの横幅は 200px としている。

// 画像ファイル名を変数 imgFile に代入
$imgFile = "./img/xxx.jpg";
// ファイルサイズを取得し、100000 bytes 以上の場合、
// 画像縮小処理の copyImgForMobile() を実行する
if (filesize($imgFile) >= 100000) {
// copyImgForMobile() で縮小画像のファイル名を imgFile に代入
  $imgFile = copyImgForMobile($imgFile);
}
// 画像を表示
  echo = "<div align='center'><img src='". $imgFile. "' width='200' alt='' title=''></div>¥n");

// 画像の縮小処理
function copyImgForMobile($imgFileName) {
// ファイルの横幅を変数 imgWidth に、高さを変数 imgHeight に代入
  list($imgWidth,$imgHeight) = getimagesize($imgFileName);
// 縮小する画像のリソースを変数 imgResource に代入
  $imgResource = @imagecreatefromjpeg($imgFileName);
// 縮小後の横幅を 200px に固定し、変数 imgWidthSmall に代入
  $imgWidthSmall = 200;
// 横幅を縮小する割合から縮小後の高さを変数 imgHeightSmall に代入
  $imgHeightSmall = ($imgWidthSmall / $imgWidth) * $imgHeight;
// TrueColor イメージを新規に作成し、変数 imgCopy に代入
  $imgCopy = imagecreatetruecolor($imgWidthSmall, $imgHeightSmall);
// 画像の縮小を実行する
  imagecopyresized($imgCopy, $imgResource, 0, 0, 0, 0, $imgWidthSmall, $imgHeightSmall, $imgWidth, $imgHeight);
// ファイル名を名称部分と拡張しに分け、変数 imgFileStr に代入
  $imgFileStr = explode(".", $imgFileName);
// ファイル名部分の最後に「携帯用」として「_m」を付け、縮小後のファイル名を生成
  $imgFileNameNew = $imgFileStr[0]. "_m". $imgFileStr[1];
// 縮小後の画像を出力する
  imagejpeg($imgCopy, $imgFileNameNew);
// 縮小後のファイル名を返す
  return $imgFileNameNew;
}

8/12/2010

携帯サイトで外部 CSS のようにスタイル付けをする

携帯サイトはあまりにも制限が多く、Javascript を携帯サイトで使えないため、なかなか美しいサイトを Flash 抜きでは作りづらい。正直、携帯サイトってうんざりすることが多い。もしターゲットユーザに壮年以上を含める場合、壮年以上の人は携帯の機種変更を長年していないことも案外多く、最新機種に併せた作り方ではレイアウトがイカれてしまったりする。こんな場合は table だって使えないし、CSS だって使わない方が無難だろう。しかし現代のウェブページの制作に慣れてしまうと、CSS の便宜性は使いたい。できれば 1 ファイルで管理したいから外部 CSS を使いたい。そんなときはどうすれば良いのか。

まず、スタイルを CSS ファイルに書かなければならないということはない。php に書いてしまえばいい。ページも php にすれば、include で読み込み、変数をスタイルとして使えばできる。例えば、文字色の赤や大きい文字を設定する場合は、こんな風にすればできる。

★/css/css.php
<?php
  $colorRed = " color='#ff0000'";
  $fontBig = " size='+3'";
?>


★/index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <title>タイトル</title>
    <? include "css/css.php"; ?>
  </head>
  <body>
    <font<? echo $colorRed; ?>>文字色が赤</font><br>
    <font<? echo $fontBig; ?>>文字サイズ大きめ</font><br>
    <font<? echo $colorRed. $fontBig; ?>>文字色が赤で文字サイズが大きめ</font><br>
  </body>
  </html>


php を include しているので head 内に放り込む必要はないけど、css の感覚からこう表記してみた。これだったら、私のようにプログラミング能力が高くない人でもスタイルを一括管理できる。

携帯ブラウザでの真ん中のソフトキーの表記を変える

携帯サイトでウェブページを閲覧する場合、ブラウザ一番下部の場所に「決定」とか「選択」とか表示されている部分があると思う。この表記は title 属性を読み込んでおり、a 要素や input 要素等に title 属性を仕込んでおけば、「決定」とかの部分が title 属性の文字となる。

この「決定」とかはフォーカスが当たらないと表示されないので、img 要素に指定しても意味はない。私が確認した要素は下記の通り。

a 要素
input 要素
option 要素


select 要素は記述しても変わらなかった。

上記は現在、私が使っているキャリアである au 機にて確認したもの。

QR コードを自動生成する

パソコン版ウェブサイトにて、例えば多く抱えるそれぞれの店舗ページに QR コードを載せたい、みたいなことがあるかもしれない。そんな場合は、固定のトップページへ誘導する QR コードよりも、携帯サイト内のその店舗のページへ誘導する QR コードの方がユーザビリティがいいと思う。しかしその QR コードをいちいち嵌め込んでいられない。

私が作ったものではなく単なる紹介ではあるけど、これを使うと簡単にできる。
QR コード・バーコード

このウェブサイト内にある「QR コード クラス ライブラリ」を使えば本当に簡単。私は Server Side のスクリプトは php しか扱えないので、php 版を使っている。使い方は「QR コード クラス ライブラリ」内の README.txt に詳しく記載されている。

パソコン版ウェブサイトトップページで携帯からのアクセスを振り分ける

This summary is not available. Please click here to view the post.

8/04/2010

日本でオーロラ見られるかも 4 日夜、北の空に注目

日本でオーロラ見られるかも 4 日夜、北の空に注目

果たして本当にオーロラを見られるんだろうか。実に楽しみであるけど、あまりにも不確定なので夜には忘れてしまっているかもしれない。神秘的なオーロラを見てみたいが、北欧はめっちゃ寒いし、なによりも飛行機が苦手。怖くてたまらん。しかも行った時に見られないかもしれないというオプション付き。確実に見られるクリスマス市とは訳が違う。

でも一生に一度は見てみたいなぁ。