画像をドラッグ&ドロップするサンプルです。
HTML5対応のブラウザで確認すると動きが確認出来ます。 ⇒ サンプル
ちなみにjQueryを使用したドラッグ＆ドロップのサンプルはこちらから。 ⇒ サンプル
7月 242012
5月 182012
5月 172012
【 主なスマートフォン機種の画像解像度 】
| 機種名 | キャリア | 画像解像度 |
| GALAXY S Ⅱ LTE SC-03D | docomo | 480 x 800 ピクセル |
| Xperia SO-01B | docomo | 480 x 850 ピクセル |
| Xperia SO-02D | docomo | 720 x 1280 ピクセル |
| AQUOS PHONE IS14SH | au | 540 x 960 ピクセル |
| iida INFOBAR A01 | au | 540 x 960 ピクセル |
| iPhone 3GS | SoftBank | 320 x 480 ピクセル |
| iPhone 4 / 4S | SoftBank、au | 640 x 960 ピクセル |
【 Viewportと画像解像度の違い 】
ViewPortとは、コンテンツ表示領域のこと。ステータスバー、コントロールボタンを覗いた画像領域を指す。
必ずしも画像解像度＝ViewPort ではない。
例としてiPhone 4 を紹介。
iPhone 4の画面解像度は、640ピクセル。
iPhoneのViewPortのデフォルト値は、980ピクセル。
ここに、幅320ピクセルの画像が入ったHTMLを表示すると、横幅の1／3 に画像が表示される。
もちろん、ViewPortの設定値が320ピクセルだったら、画面いっぱいに画像は表示される。
これは、iPhoneの標準ブラウザである、Mobile SafariのViewPortの幅が980ピクセルの為。
jQuery Mobileを用いてスマフォ向けサイトを作る時は、次のような指定をすること。
<meta name="viewport" content="width=device-width, initial-scale=1">
上記コードの意味は、幅をデバイス幅にする、初期拡大率を1にする。この設定をしておけば、jQuery Mobileを利用して作られたサイトは、どのスマフォでも適切なサイズで表示されるようになる。
5月 132012
5月 122012
まずはサンプルコードの画面イメージから。
Galaxy S2で見た時のキャプチャー画面。クリックすると大きくなります。
5月 112012
現在あるPC版のホームページをスマートフォンに対応させる為には、どうするのが一番手っ取り早いか？
いろいろ調べてみると、jQuery Mobileが一番良さそう。 簡単にだが特徴をまとめてみた。
4月 262012
前からHTML5には興味があったのだが、以下のサイトを見て、ビビッと身体に電気が走った。(ビビビッではない、ビビビッだと松田聖子になってしまう)
HTML5サンプル集・デモリンク集まとめ / HTML5の普及の序章(8)
という事で、最近、技術的な事を殆ど勉強していないので本格的に勉強しようと思う。
まだまだ何も分からない事だらけ。あせらず、一歩一歩理解して行こう。
最終目標としては、
・HTML5のホームページを開設する(HTML5のカテゴリ数が20を超えたら作ってOK)
・小生が持っているホームページをHTML5で作る（万歩計、お買い得、Etc）
・HTML5でスマフォアプリを公開する
・HTLM5のホームページで、無料テンプレートを公開する(下部にタブ付き、取りたければ1000円おくれみたいな)
・本を出版したい（本を出すのは長年の夢）
ざっ と書き出した所、こんな感じでしょうか。
情報も多そうだし、まずは簡単な本を購入しようと思います。
記事ネタを考えてみる
１．そもそもHTML5って何？
２．HTML5で作られたアプリってどんなのがあるか？
２－１ HTML5を使うと何のメリットがあるの？
２－２ 各ブラウザの対応状況ってどんな感じ？
２－３ 各スマフォの対応状況ってどんな感じ？
３．HTML5って難しいの？
小生が経験した言語と比較する ⇒ Java、VB6、.Net、PHP、JavaScript、Etc
どんなコードを書けばどんな事が出来るの？
４．これからやっぱり主流になるの？
５．サンプル見せて
６． スマフォの各機能のどれだけ実装されているの？
７．HTML5を作るには、何から勉強すれば良いの？（HTMLは知ってるけど）
８．HTML5のサンプルコード１
９．HTML5のサンプルコード2
１０．HTML5のサンプルコード３
4月 122012
無線と有線どちらが早い？
この間、聞かれて恥ずかしい思いをした、、。
『無線と有線 どっちが早い？』 友人
『有線の方が早いに決まってるやん』 自分
『どうして？』 友人
『・・・・。』 自分
長い間ソフトウェア開発に従事しているが、どうして有線の方が早いのか正確に仕組みを理解していなかった。
これはいけないと思い、早速Google先生に聞いてみる。(先生は、パッと 答えてくれます。便利な世の中ですねぇー)
備忘録として。
無線には規格があり、通信規格によっては通信速度が制限される。
●規格の種類は今の所、4種類
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
| 規格 | 通信可能速度
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
| 11a | 54M
| 11b | 11M
| 11g | 54M
| 11n | 600M
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
その為、Note PC、タブレット、スマフォのような無線を使える機器が、どの規格を使用しているかによって通信速度が変わります。
例えば。 家の回線速度が、100MでNoTePcの規格が11bだとすると最大11MBまでしか通信速度は出ません。
気になる方はパソコンの無線規格を調べて、一度点検された方が良いかもですね。
ちなみに、最新機種の殆どは、11nを搭載していますので、あまり気になさらないで良いようです。
規格を調べるのが面倒な方は、こちらから実速度を測定してみて下さい。
↓
スピードテスト | USENの回線速度測定
http://www.usen.com/speedtest/top.html
やっぱり、有線の方が早いんだよねぇー。
勉強したし友人に説明しよっと♪
※ちょっとでも役に立った方は、アプリDLお願いしますね♪
3月 182012
Google 先生より何か警告メッセージが来た。
海外でアクセスされているがこれはお前が行ったものか？ 違えばパスワードを変更せよ 的な事が書いている。
白地バックの所のアクセスタイプは、IMAP,POP3だったりとメール関連なので無視するとして、赤茶色バック部は気になる。
ここ最近、アメリカには行ってないし、ロケーションの categorical.com にも見覚えない。
ちなみに最近登録したサイトに以下がある。
アプリアクセスサイトのAppannieだ。
もしかしたら、ここのサイト管理者が僕のアカウントでログインして何か調査をしているのかもしれないね。（現在、Androidのアクセス解析がうまくいっていないので）
はっきりと解らないので、とりあえず今はパスワードを変更しておこうと思う。
12月 302011
ネットを調べていても情報が無かったので、情報共有です。
ffftpを、CドライブのProgram Files（ｘ８６）に保存するとフォルダ・ファイルが表示されません。
FFFTPはWindows7 64bitに対応していないから見れないのか！？ そう思っている方に念のためお伝えしておきます。
Winidows7 64bitでも別に問題なくFFFTPは動作しますのでご安心を！
Windows Vista以後はセキュリティ向上の為に、Program Files配下にデータを作る事を禁止しています。そのため、CドライブのProgram Files（ｘ８６）の下にフォルダ・ファイルを作ると、OSが勝手に仮想フォルダといわれる場所に保存します。 （そうです、この現象って、FFFTPだけではなく、Program Files 配下にデータを作るソフト全てにいえる事なんですね。）
仮想フォルダの場所は以下になります。
C:\%LOCALAPPDATA%\VirtualStore\Program Files(x86)\ffftp
例：C:\Users\Owner\AppData\Local\VirtualStore\Program Files (x86)\ffftp
※ %LOCALAPPDATA%は環境変数と呼ばれるもので、パソコン内で管理しているフォルダパスになります。よって、それぞれのPCによって場所が異なります。コマンドプロンプト(黒い画面)でsetというコマンドを打てば確認する事が出来ます。以下に確認方法を画像を用いて説明しますのでご参考に。
①コマンドプロンプトを、スタート＞すべてのプログラム＞コマンドプロンプトから起動する。
②コマンドプロンプト画面でsetと入力すると、LOCALAPPDATAのフォルダパスが表示されます。
場所がわかれば、フォルダ・ファイルをコピーして以下の対策を行えば良いと思います。ちなみに私は1、2両方の対策を行っていますｗ
- 独自の場所にフォルダ・ファイルを保存する
- ユーザアカウント制御レベル（スタート＞コントロールパネル＞ユーザアカウントと家族の安全設定＞ユーザアカウント＞ユーザアカウント制御設定の変更）を一番低いレベルにする。（UACを一番低いレベルにと、直にc:\Program Files（ｘ８６）にファイルを保存出来ます）
仮想フォルダ ・・・ Program FilesフォルダやWindowsフォルダ配下に設定を保存するようなWindows7未対応のアプリが、Windows7上では急に動かなくなってしまうことが無いように設けられた互換性維持機能です。 Windows7未対応のアプリはVirtual Store有効で動作します。Virtual Store有効のアプリがProgram Filesのように保護強化されたフォルダにファイルを保存しようとすると、目的のフォルダではなくVirtual Storeと呼ばれる別のフォルダにファイルが保存され、 以後、同じファイルを開こうとしたときにはVirtual Store側にあるファイルが開かれる仕組みになっています。
参考URL：Windows Vista/7 のファイルの仮想化（Virtualization）について
12月 252011
Merry Christmas ！
と言うことで、Lenovo pcをクリスマスイブに購入しちゃいました♪
その時、デスクトップにAmazonのアイコンを発見。
恐る恐るプロパティの中を覗いてみると・・・・。
何と、アフィリエイトIDが埋め込まれているでは無いですかぁ！！
証拠の画像
↓
lenovo01-22 とは・・・。
- Lenovo社が埋め込んだ？
- 購入したアプライドが埋め込んだ？
- アプライド西福岡店の店員が埋め込んだ？
確かにPCを購入した際に、リカバリCD作成で１日貰うのが遅れました。
設置するならリカバリCD作成中に簡単に出来ちゃうよね？
店員さんが犯人だったら面白いのですが（笑）
まあ、アプライドって上場してるしまさかそんな事ないと思いますが。
（ちなみに昔は僕も株主でした、もう売っちゃったけど）
と言うことでどうでも良かったのですが、ネタとして記事を書きました。
世の中、いろいろな所に金儲け技があるのですねぇ、感心しちゃいます。
7月 042011
【 PoE対応スイッチングHUB（給電対応HUB） 】
●説明
POEとは、Ethernetの配線（ネットワーク）を経由して、電源を供給する技術の事。
このPoe対応スイッチングHUBを使用すると、ネットワーク経由で、電源を供給する事が出来る。
LAN配線の途中にはさむ事で、スイッチングHUBの機能を持っている。
Panasonicのラインナップを見ると、5～24ポートある。（２０１１年７月現在）
●使用例
私が行っているお客様の使用例。ネットワークカメラ8台に対してネットワークごしに電源供給を行っている。
●使用用途
IP電話、無線アクセスポイント、IPカメラ（ネットワークカメラ）
※PoEの使用はIP電話の停電対策としても向いている。個々の電話機のACアダプタ等をUPSバックアップする必要がなく、PoEハブをUPS等でバックアップしておくだけで停電対策となる。
●参考URL
PPanasonic PoE給電スイッチングハブ
5月 112011
WordPressで作っているブログのヘッダー部にスーペースが出来ちゃいました。
それの対応にはまっていました。同じようにはまっている人がいるかもしれないので記事に。
以前、ロリポからエックスサーバに移行した際にも同じような現象が発生しました。
その時は、エディタの文字コードを UTF-8 Bom無し にしたら直りました。
今度は、Wordpressを３．１にバージョンアップしたらI・E７でスペースが入ってしまいます。
Chrome、FireFoxは良かったのですが、さすがI・E（Internet Explore）です。
以下のURLを見て対処を行いました。どうもありがとうございますm(_ _)m
WordPress(ワードプレス)にwp_headを入れたらトップに空白が出た時の対処
上記ホームページを表示していたら何やら切断されるので一応コピペで保存しておきます。
原因はバージョン3.1から新たに導入された「管理バーの表示」という機能のようです。 対処方法
・管理画面での対処
デフォルトでは「管理バーの表示」がオンになっていますので、オフにしてやれば解決できます。
設定は
「左メニューのユーザー」»「ユーザーを選択」で設定画面を開き、
「管理バーの表示」の「サイトを表示する際」のチェックを外します。
これで、ログインした状態でページを見ても隙間は空きません。
・関数による対処
上記の方法だと、 ユーザーを作る度に設定を変える必要がありますが、functions.phpに次の1行を追加したら機能させないようにできます。
add_filter( ‘show_admin_bar’, ‘__return_false’ );
5月 042011
皆さん、Tumblrって聞いた事ありますか？
Tumblrは、ミニブログサービスのひとつです。
ミニブログとは、Web上の記事や画像、動画などを手軽にスクラップできるシンプルなブログサービスなのです。
今回は、このミニブログにムームードメインで取得した独自ドメインを関連付けたいと思います。
設定方法は、超簡単です。たったの30分で終わります。（反映には、１～3日かかりますが。）
ちなみに、独自ドメインとは、簡単にいうと短いURLです。
身近な所でいうと、http://google.com、http://yahoo.co.jp、http://twitter.com/ 等があります。
もう一方のサブドメイン。簡単に言うと、長いURLです。
身近な所でいうと、皆さんが普段使われているブログがほぼ全部そうです。
通常のブログサービスですと、以下のようなアドレス（URL）しか取れません。
http://tohohojin.blog89.fc2.com/ ・・・FC2
http://d.hatena.ne.jp/ozamoto/ ・・・はてな
http://ameblo.jp/shibuya/ ・・・アメブロ
https://sites.google.com/site/ozamoto/ ・・・Google
やっぱり、短めのドメイン。自分が取得したドメインを使ってブログを書きたいですよね。
独自ドメインになるとSEOパワーも強くなりますし、長い目で見ると間違いなく独自ドメインが検索に引っかかるようになります。
前置きが長くなりましたが今回は、ムームードメインで取得したドメイン（http://ozamoto.com）をTumblrに設定する方法を載せます。
独自ドメインの運用費用は年間5８０～２,９８０円かかります。ご了承下さいませ。
以下のページは、私が取得した独自ドメインをTumblrに設定したブログです。
一応、今回目指す完成形ですね。
流れとしては、以下の通り。作業自体は以下の３手順。 そんなに難しくありません。
- Tumblrのユーザ登録を行う。
- ムームードメインで独自ドメインを取得する。
- ムームードメインで取得したドメインをTumblrに設定する。
【手順１．Tumblrのユーザ登録を行う。】 ・・・５分
- http://www.tumblr.com/register に行き、メールアドレス、パスワード、URLを入力する。（URLはブログの最初のURLなので何でも良い）
- はじめる！ボタンをクリックする。
- ”まずは最初の投稿を書いてみよう”とメッセージが出るので、適当に入力して終わらせる。
- ブログのカスタマイズをどうこうせよと言ってくるので無視して、保存するをクリックして一旦終わらせる。
Tumblrカスタマイズ画面
- 入力されたメールアドレスに確認のメールが送信されているので、メールを開いてURLをクリックする。
- あなたは素晴らしい人です！ と褒められたら一旦休憩。 手順２に進みます。
【手順２．ムームードメインで独自ドメインを取得する。】 ・・・２０分
- ムームードメイン（http://muumuu-domain.com/）にアクセスします。
- 取得したいドメイン名を入力して、チェックするボタンをクリックします。
- 登録できますボタンをクリックすると、お申し込みフォーム画面に行くように促されるので、ユーザ登録を行います。
- お申し込みの流れ（http://muumuu-domain.com/?mode=guide&state=order）を参考にお申し込みを行う。
- お申し込み後の流れ（http://muumuu-domain.com/?mode=guide&state=order_end）を参考にドメイン取得を行う。
- コントロールパネルをクリックして、取得したドメインを表示します。
- コントロールパネル画面でネームサーバ設定変更 をクリックします。
- ムームードメインのネームサーバ（ムームーＤＮＳ）を使用する を選択してネームサーバ設定変更をクリックします。（元からそのままになっている場合は何もなさらないで結構です。）
ムームードメインのネームサーバ（ムームーＤＮＳ）を使用する
- コントロールパネル画面でネームサーバ設定変更のセットアップをクリックします。
ネームサーバ設定変更 セットアップ
- カスタム設定のセットアップ情報変更画面で、種別をA、内容に、72.32.231.8 を入力します。（番号が万が一変わる場合があるので、念のため番号を確認して下さい。 http://www.tumblr.com/docs/ja/custom_domains ）
カスタム種別、内容
【３．ムームードメインで取得したドメインをTumblrに設定する。】 ・・・５分
- Tumblrにログインして ”トップ画面”⇒”アカウント”⇒”基本設定”⇒”カスタマイズ画面を開く” の手順でカスタム画面を開いてください。
- プロフィールをクリック後、独自ドメイン入力して、独自ドメインを利用するにチェックを入れ、保存をクリックして下さい。
独自ドメインの設定方法 Tumblr
- 後は、１～３日待てば独自ドメイン（http://ozamoto.com）が反映され、Tumblrの内容を確認する事が出来ます！
- 最後まで頑張っていただきありがとうございました。何か不明な点、うまくいかない点がございましたら、コメントまでお願いします。
3月 182011
引越し先のレンタルサーバに求める必須機能は以下の通り。
- 個人でも利用可能
- 様々なPHPのバージョンがプレインストール。簡単切り替え可能。
- データベース（MySql、PostGreSql）が入っている
- WordPressなどのソフト類の簡単インストール付き
- 簡易なコントロールパネル（私がLinuxの知識が乏しい為…）
- 現在使用しているプログラムが簡単に移行出来る(Ftp転送のみ)
- 安定稼動する有名なレンタルサーバ
- 国内にあるサーバ（国内にサーバが在る方が通信速度速い為）
- 地震に強い（東北地方太平洋沖地震（M9.0）で被害受けなかった所）
- マルチドメイン可能
上記内容を一言でまとめると、
ロリポよりメモリが潤沢に使える、ロリポみたいなレンタルサーバに移行したい！！ です、ハイ。
(お買い得.netは、今まではロリポップのレンタルサーバで稼動していました 
)
該当するサーバは以下３つです。
| レンタルサーバ | heteml（ロリポップ） | さくらレンタルサーバ | エックスサーバ |
| ロゴ |  |
 |
 |
| お試し期間 | 15日間 | 14日間 | 10日間 |
| プラン | スタンダードプラン | さくらレンタルサーバ プレミアム | X10プラン |
| 初期料金 | 0円 or 3,950 円
(2011年3月時点) |
1,000円 | 1,575円 or 3,150円
(2011年3月時点) |
| 月額料金 | 1,500円 | 1,500円 | 1,050～1,260円 |
| 使用可能容量 | 42.195GB | 40GB | 40GB |
| 機能一覧 | 機能一覧 | 機能一覧 | 機能一覧 |
| 各社のセールスポイント |
|
|
|
| 備考 |
|
※他にもファーストサーバ、大塚商会サーバなど検討しましたが、必須機能を満たしていない為、対象外とします。
どのレンタルサーバも、ハイパフォーマンス・大容量をうたっています。
それでは本題のレスポンス比較。
レスポンス比較には、Pingdom Toolsを使用しました。
Pingdom Toolsとは、ブラウザで開くページの速度を数値化、視覚化してくれるツールです。
コネクトまでの時間、コネクトしてからの時間などをそれぞれのファイル別に視覚化してくれます。どの部分を対策すれば良いか一網打尽ですねw 速度を測りたいページのURLを入れて、ボタンを押せば速度を測ってくれます。何故かRedirectを２回行う事があるので計測実施時には注意してそこを確認した方が良いでしょう。 ご存知なかった方はBookMarkを。Webマスター必須のツールです、お試しあれ。
コネクトまでの時間、コネクトしてからの時間などをそれぞれのファイル別に視覚化してくれます。どの部分を対策すれば良いか一網打尽ですねw 速度を測りたいページのURLを入れて、ボタンを押せば速度を測ってくれます。何故かRedirectを２回行う事があるので計測実施時には注意してそこを確認した方が良いでしょう。 ご存知なかった方はBookMarkを。Webマスター必須のツールです、お試しあれ。
上記ツールを利用して各レンタルサーバのレスポンスを比較してみました。
比較するページは以下の3ページ。どれもガリガリプログラムを書いています 
※ちなみに検索結果ページは、5つのWeb Api(Amazon、楽天、Yahoo!、価格.com、Yahooオークション)を同時にリクエストして画面に表示してます
３つのページを、色々な時間帯に分けて計測してみました。（１回目⇒朝方、２回目⇒昼、３回目⇒夜、４回目⇒夜中、５回目⇒朝方）
その結果は以下です。
| レンタルサーバ | heteml（ロリポップ） | さくらレンタルサーバ | エックスサーバ |
| ロゴ | |
|
|
| トップページ |  平均10.2秒（１回目：9.６秒、２回目：11.3秒、３回目：9.6秒、４回目：11.1秒、５回目：9.5秒） |
平均11.2秒（１回目：１０．５秒、２回目：13.8秒、３回目：10.5秒、４回目：11.9秒、５回目：9.5秒） |
平均10.9秒（１回目：９．６秒、２回目：12.2秒、３回目：9.7秒、４回目：13.1秒、５回目：10.0秒） |
| 検索結果ページ | 
平均7.9秒（１回目：7.6秒、２回目：8.0秒、３回目：7.7秒、４回目：8.8秒、５回目：7.6秒） |
平均10.4秒（１回目：１０．３秒、２回目：11.0秒、３回目：9.8秒、４回目：10.8秒、５回目：10.2秒） |
平均8.8秒（１回目：８．６秒、２回目：9.7秒、３回目：7.8秒、４回目：9.6秒、５回目：8.4秒） |
| 商品詳細ページ | 
平均9.0秒（１回目：８．６秒、２回目：10.6秒、３回目：7.8秒、４回目：10.4秒、５回目：7.5秒） |
平均7.7秒（１回目：７．５秒、２回目：8.5秒、３回目：7.8秒、４回目：7.7秒、５回目：7.1秒） |
平均9.6秒（１回目：１０．６秒、２回目：9.8秒、３回目：8.9秒、４回目：10.5秒、５回目：8.1秒） |
※上記画像は、1回目の画像を添付しています。２~５回目は省略しています。
考察と結果
どのサーバが一番パフォーマンスが良いか？ 結論から言いますと、正直判りませんでした．．．
色々な時間帯で速度を測りましたが、どの結果もまちまち。どのレンタルサーバも共用サーバなので、他のユーザの使用状況によって結果は変わってきます。（マネージドサーバだったらそんな事はないでしょうが）
夜間の誰もWebを見ていない時間帯に計測すれば比較的正しいデータが取れるかと思い計測しましたが、結果、まばらなデータになりました。推測になりますが、バッチデータ（crontabで自動起動）で何かの処理を行っているのかもしれませんね。
私の結論
色々考えた結果、エックスサーバーに契約する事にしました。
理由は以下３点。特に赤文字部が決め手です。
- 利用率50%を目安に、随時帯域を増大。
- プラン簡単変更機能付き（ここ）
- 値段が他の２つよ５００円も安い！
同じ悩みを抱えている、賢明な皆さんならお解りでしょう。
そうです、せっかく今のサーバから頑張って移行作業を行ってもさらにアクセスが伸びた時に、同じ思いをしてサーバを探す・移行作業を行う のは面倒じゃないですか？（Amazonのようなロードバランサーがついているサーバを使えば問題ありませんが、自分でLinuxの環境を構築する必要があります。ちょっと敷居が高いですよね。）
エックスサーバだと、X10プランからX20、X30へのプラン変更がマウスを数回クリックするだけで簡単に行えます。この先を見越して契約するのでしたら、プラン簡単変更機能が付いたエックスサーバが一番良いと思いませんか？
という事で私は今からエックスサーバと契約しようと思います。（←3月20日に契約済み。それから1年経過。2012年4月現在の使用感レポート。 今のところ、何不自由なく動いています。レスポンスも良好です♪）
今後、もっとサイトのアクセスが伸びれば、もちろんX20⇒X30 ⇒マネージドサーバに移行する予定です。
最終的にはマネージドサーバを夢見て、今後は頑張っていこうと思います。
以上、長い文章を最後まで読んで頂きありがとうございましたm(_ _)m