iPhoneのキーボードをすばやく切り替える。

2011.05.21 Sat

iPhoneのキーボードはデフォルトだと「日本語テンキー」「日本語ローマ字」「絵文字」「English(US)」の4種類ありますが、キーボードを切り替えるときは左下にある地球みたいなマークをタップします。

でも、「English(US)」にキーボードを切り替えるときに地球みたいなマークを3回もタップしなければいけません。

何か良い方法はないのだろうかと思っていたところ、地球みたいなマークを長押しすることによって下の画像のように表示されることがわかりました。これによってすばやくキーボードを切り替えることができます。

実はこの方法はMobile Safariのブックマークにデフォルトである『iPhoneユーザガイド』の「各国キーボード」から「キーボードを切り替える」という項目に載っています。

説明書は一通り読んでおいたほうが良いと思った出来事でした。


WebサイトのURLに「www」を付けるか付けないかを統一する。

2011.05.19 Thu

WebサイトのURLに「www」が付いていたり、付いていなかったりというのをよく目にします。一体、何が違うのだろうか。
ずっと知らないふりをしてましたが、ちょっとこれからのことを考えると知っておいたほうが良いと思って調べてみました。

「www」って何?

そもそも「www」とは、World Wide Webの略称でサーバーのホスト名を示しています。またサブドメインと呼ばれているものです。

「www」をホスト名に設定しなければならないという決まりはないので、WebサイトのURLに「www」が付いていたり、付いていなかったりということが起きます。

でも、両方が混在すると検索エンジンやソーシャルブックマークなどで別々のWebサイトとして認識されてしまいます。これは何とかしないといけません。

URLを統一させる。

URLに「www」を付けるのか、付けないのかを設定する方法があります。
Webサーバーの動作を制御する.htaccessファイルに下記のコードを記入することによってできます。

「www」を付ける

RewriteEngine on
RewriteCond %{HTTP_HOST} ^dakkie\.com
RewriteRule (.*) http://www.dakkie.com/$1 [R=301,L]

「www」を付けない

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.dakkie\.com
RewriteRule (.*) http://dakkie.com/$1 [R=301,L]

「dakkie.com」の部分は自分のドメインに変更してください。

「www」を付けても付けなくてもSEO的に違いはありませんが、どちらかに統一させるのはしておいたほうが良いと思います。


WordPressにソーシャルネットワークボタンを追加する。 番外編

2011.05.17 Tue

「WordPressにソーシャルネットワークボタンを追加する。」で紹介したソーシャルネットワークボタン、ソーシャルブックマークボタンをWordPressに追加するプラグイン『WP Social Bookmarking Light』の「ツイートする」ボタンはデフォルトでは記事タイトル、短縮URL、viaをツイートするようになっていますが、記事タイトルの後ろにブログタイトルを追加したいと思ってちょっとプラグインの中身を変えてみました。

services.phpの中に下記のような「ツイートする」ボタンについての記述があります。

/**
* @brief twitter
*/
function twitter()
{
  $options = wp_social_bookmarking_light_options();
  $twitter = $options['twitter'];
  $width = $twitter['width'] != '' ? $twitter['width'] : '120';
  $height = $twitter['height'] != '' ? $twitter['height'] : '20';
  return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
    .' src="http://platform.twitter.com/widgets/tweet_button.html'
    .'?url='.$this->encode_url
    .'&amp;text='.$this->encode_title
    .($twitter['via'] != '' ? '&amp;via='.$twitter['via'] : '')
    .'&amp;lang='.$twitter['lang']
    .'&amp;count='.$twitter['count']
    .'"'
    .' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
    .'</iframe>');
}

これを解読してみると、「.’&amp;text=’.$this->encode_title」のあとに入れればいいことがわかったので、下記のようにブログタイトルを加えました。わかりにくいですが、太字で「.’ – dakkie blog’」って書いてあります。

/**
* @brief twitter
*/
function twitter()
{
  $options = wp_social_bookmarking_light_options();
  $twitter = $options['twitter'];
  $width = $twitter['width'] != '' ? $twitter['width'] : '120';
  $height = $twitter['height'] != '' ? $twitter['height'] : '20';
  return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
    .' src="http://platform.twitter.com/widgets/tweet_button.html'
    .'?url='.$this->encode_url
    .'&amp;text='.$this->encode_title
    .' - dakkie blog'
    .($twitter['via'] != '' ? '&amp;via='.$twitter['via'] : '')
    .'&amp;lang='.$twitter['lang']
    .'&amp;count='.$twitter['count']
    .'"'
    .' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
    .'</iframe>');
}

これで記事タイトルの後ろにブログタイトルが追加されました。
ただこの方法はプラグインの中身を直接変えてるので、プラグインを更新してしまうと元に戻ってしまいます。何か別の方法はないですかね。


最近の気になるWebサイト Vol.3

2011.05.16 Mon

ついにスッキリ!JAPANが公開されました。
ソースコードにアスキーアートで描かれていた謎の人物は松木安太郎さんでしたね。

ティザーサイトとはかなりギャップがあるデザインですが、このサイトはサンスタートニックシャンプーのキャンペーンサイトでスッキリしないモヤモヤした気分を入力すると、松木さんがそのモヤモヤを吹き飛ばすようなシュートを決めてくれます。そして松木さんがコメントをくれるというものです。

マウスの位置によって松木さんやキャッチフレーズが移動するので少し奥行き感があったり、松木さんがシュートを決めるまでの映像が流れたり、さらには松木さんがシュートを決めるときに画面のデザインが勢いよく壊れたりとダイナミックな演出が半端ないです。とてもユニークなサイトになっています。

PC向けサイトだけでなくスマートフォン向けサイトも用意されています。


フルFlashのサイトにHTMLのフッターを付け加える。

2011.05.15 Sun

完全なフルFlashのサイトではなくて、一部だけHTMLを組み込むということがあります。今回はフルFlashのサイトに固定したHTMLのフッターを付け加える方法を紹介します。

1.HTMLにswfファイルを簡単に埋め込むことができるSWFObjectとウィンドウを指定したサイズよりも小さくした場合にスクロールバーを表示するようにするためにSWFForceSizeを使います。<head>内に下記を追加します。

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>

2.<body>内に下記を追加します。

<div id="flashcontent"></div>
<script type="text/javascript">var so = new SWFObject("xxx.swf", "xxx", "100%", "100%", "8", "#ffcccc");
  so.addParam("wmode", "transparent");
  so.addParam("menu", "false");
  so.addParam("scale", "noscale");
  if(so.write("flashcontent")){
    var forcesize = new SWFForceSize(so, 900, 700);
  }
</script>
<div id="footer_wrap">
  <div id="footer"></div>
</div>

今回はSWFObject1.5を使っているので、上記のような書き方になっています。「var forcesize = new SWFForceSize(so, 900, 700);」の部分は幅900pxで高さ700pxの領域は最低限表示するという指定をしていて、もしこの指定したサイズよりもウィンドウを小さくした場合はスクロールバーが表示されるようになっています。

3.下記のようにCSSを記述します。

html, body, #flashcontent {
  height: 100%;
}
body > #flashcontent {
  min-width: 900px;
  width: 100%;
  min-height: 700px;
  height: 100%;
  background: #ffcccc;
}
#footer_wrap {
  width: 100%;
  height: 105px;
  margin: -105px 0 0;
  position: absolute;
  left: 0;
  background: #ccffcc;
}
#footer {
  width: 900px;
  height: 105px;
  margin: 0 auto;
  background: #ccffcc;
}

幅100%で高さ100%のフルFlashなので、#footer_wrapにmargin:-105pxを指定してHTMLのフッターを持ち上げるというのがポイントです。


page 1 of 212