[HTML&CSS] Google Chrome for Android でCSSのwidth指定がおかしな挙動をする。親DIV要素のwidth値を正しく取得できない。


Android版chromeのバグか?

以下のようにHTML要素を組む。

これをAndroid chromeで表示させるとこうなる。

現象を整理すると以下の通り。

  • つねに子DIV要素1は正しく表示される。
  • margin、padding類は全て0pxを指定している。
  • Android chrome 以外のPCとスマフォで使用できる思いつく限りの全てのブラウザでこの現象は発現しない。
  • 当該ブラウザで必ずこの問題が再現されるわけではなく「たまに」正しく表示されることがある。
  • 「display:none;」でいったん非表示にしてから「display:block;」で再表示すると問題が解消される。

回避策はすでに示した通り、displayスタイルで再表示してやるか、もしくは初めから「display:none;」としておき、windowロードが完了した後にjQueryか何かで「display:block;」としてやれば、問題は回避される。

問題の原因は不明で、HTML、CSSレベルではどうやっても解決できなかった。

最低構成にしても起こる時は起るし、どんなに複雑に構成していても起こらないときは一切起こらない。

う~ん、でも他のサイトにコレらしきバグ報告がないってことは俺が悪いのか???

auスマフォをWiFi運用すればキャリアメール(EzWebメール)のパケット費用はかからない


auのスマフォをパケット定額(割引)プランを一切契約せず、基本料金のみでWiFi運用(モバイルネットワークOFF運用)している。そこで気になった事が一つある。

「auキャリアメールはパケット代がかかるのか?」だ。

自分の機種(ISW13HT)でauキャリアメールがモバイルネットワークOFFの状態であっても問題なく使えることは確認している。そしてその際に設定に反して3GがONになっていないことも確認した(3Gマークが点灯しないことを確認した)。

この運用方法について「auキャリアメールはWiFi運用すれば本当に無料なのか?」という確証が持てなかったので、auのサポートに電話で確認してみたところ「EzWebメールをWiFi経由で送受信してもパケットは発生しない」との回答を得た。

つまりWiFi運用をしている限り、ほぼパケット費用をゼロにできる。俺の場合はつねにWiMAXモバイルルーターを持ち歩いているので、常にWiFi運用が可能というわけ。いやースマフォに機種変してよかった。

[HTML&CSS] ブロック要素に対して、floatとdisplay:table-cell;→vertical-alignは同時に設定することはできない


いまさらだけど、ブロック要素(div要素など)にfloatを設定してレイアウトした場合、display:table-cell;をつかってvertical-alignを設定することはできない。しってた?何を当たり前のこと言ってんだ、って?ああ、そうさっ!!ついさっき知ったよっ!!コンチクショウッ!!

ということで、display:table-cell;をつかってvertical-alignを設定する際には、レイアウトはdisplay:table-row;やdisplay:table-cell;を使ってレイアウトするか、ボックス要素を入れ子状態にして、子ブロックをdisplay:table-cell;→vertical-alignとすれば問題ない。

もちろんだけど、display:table-cell;をつかってvertical-alignを設定するテクニックはIE6,IE7では使えない。あーIE6,IE7,IE8とか早く死んでくんねーかなー。大事な事なので2度いいます。あーIE6,IE7,IE8とか早く死んでくんねーかなー。

WEB用ライトウェイトスクリプトのちょっとアンチテーゼなオブジェクト指向


ずっとWEBアプリ用のライトウェイトなスクリプトをコーディングする仕事をしてきてるわけだけど、前職の先輩が言ってた。

「こういうライトウェイトなスクリプトはファイル一つ一つがクラスのようなものだ」と。

つまり・・・

そのファイルをコピーして使うのが継承すること。

どのファイルをちょっと書き換えるのがオーバーライドすること。

プロパティ(メンバ)はできるだけ別ファイルで定義する。

「できるだけコードを改変せずに」なんて考えない。

カプセル化なんてしない。フルオープンがいい。

逆に、気軽に書き換えて、それが簡単に管理できるようにする。

ライトウェイトなんだからコーディングから機動性を奪ったら長所が消える。

多態性(ポリモーフィズム)なんてしらん。ライトウェイトに所以する機動性で十分だ。

スパゲティになるのはアフォが何も考えずにコーディングするからスパゲティになるのであって、シッカリした管理の元に、統一されたポリシーをコーダー全員が共有してコーディングすれば、スパゲティになんかならない、と。

これって十分オブジェクト指向だ。

すべてこの考えを踏襲しているかというと、そういうわけじゃないけど、ほぼこの思想は俺のコードに受け継がれている。

だから、俺の書くコード量は多いけど、ほとんどがコピペだ。コピペすることを前提書かれたコードだから信頼性も高い。

継承してオーバラードして・・・カプセル化してるから何してるかわからない・・なんてないからコード量は多いけど非常にシンプルで読みやすい。

さらに、本棚を整理するようにコードも整理できるから、さらに読みやすい。つまりバグが少ない。

javaとかCとかからもってきた概念を用途の違うライトウェイト言語に適用しようとするからややこしいんだよ。

iPadやiPhoneの液晶保護フィルム(液晶保護シート)をキレイに張る方法


iPadやiPhoneの液晶保護フィルム(液晶保護シート)をズレずに、気泡やホコリを入れず、キッチリ張るのは結構難しいんだけど、ちょっとした工夫でキレイに簡単に張ることができるし、手順を守れば、そこまで手先が器用じゃなくても大丈夫。

ポイントは以下のとおり。

眼鏡用クロスで表面を磨く

シツコイくらい磨いたほうがいい。ホコリって吹けば飛びそうなイメージが有るけど、頑固にくっついている奴もいるので、トコトン磨く。ただし、液晶にキズがつくほど強く磨いちゃだめだよ。

液晶保護フィルムを仮止めテープで本体に仮止めする

これ、かなり重要。これをキッチリやるとかなりキレイに張れる。逆に、これをキッチリやらないと、絶対キレイに張れない。ちなみに仮止め用のテープは100均でも売ってる。もちろんだけど、仮止めは1辺のみだよ。1辺のみでもキッチリ止めれば多少のことじゃズレない。

液晶のホコリをダストブロワーで飛ばす

ホームセンターなどで売ってるPC用エアダスターでOK。ホコリを飛ばすのは仮止めがキッチリできて、いざ張る、っていう直前にシューシューする。シツコイぐらいシューシューする。

一気に張る

接着面保護シートをはがしながらズバッと一気に張る。仮止めをキッチリしていれば、乱暴に張ってもズレないはず。絶対にゆっくり張ってちゃダメ。なぜならホコリが入るから。気泡のことは気にしない。ホコリが入っていなければ気泡なんて後でいくらでも取れるから安心してちょうだい。

入った気泡を眼鏡用クロスで取る

気泡が入っていると思うので、眼鏡用クロスで気泡をこすってみよう。大きい気泡は端に追いやるイメージで。小さい奴は上からこすると消える。

ちなみに俺が買ったiPad用の保護フィルムはこれ。安い割にイイ感じ。

iPad Retinaディスプレイモデル/iPad2用 液晶保護フィルム 指紋防止 光沢 SIP-FS01

Microsoft Translate APIとPHPをつかって翻訳モジュールつくってみた。


Google Translate APIがV2になってから有料になったそうで。ってことで月間200万文字(200k character)まで無料のMicrosoft Translate APIを使おうってひとが多いと思う。みーつー。ってことでMicrosoft Translate APIとPHPをつかって翻訳モジュールを作った手順をざ~~っくりご紹介。

つくったコード公開しようとおもったけどメンドクセから、やめた・・・ごめんね。↓で紹介しているサイトみればすぐわかるよ。

ちなみにMicrosoft Translate APIも月間200万文字を超える場合は有料になる。

トークンの取得

Microsoft Translate APIのメンドクサイところは、APIトークンを取得しなければならない点。そのトークンも500秒しか有効じゃない。500秒経過したら再取得しなければならない。うわ、マンドくせ。

ってことで、トークン取得のノウハウは↓のサイトをみればわかるのでじっくり読むように。サンプルコードもあるので、じっくり読むように。ちなみにトークン文字列頭に「Bearer 」(スペースが入っている点に注意)という文字列をいれないといけない点に注意なので、じっくり読むように。

翻訳処理

AJAXでJSONで受け取るもよし、HTTPでプレーンテキスト(XML形式)で受け取るもよし。おれはCRONでPHPブン回して自動翻訳したかったので、HTTPを使用した。↑のサイトにも翻訳処理のサンプルコードが含まれているし、詳しくは↓のサイトにも書いてある。よくよんでちょうだい。

ちなみにGoogle Translate APIは100万文字(100k character)で$20だそうな。月間費用ではない点に注意。

ちなみにちなみにGoogle Translate APIの場合は、わざわざトークンをとる必要はなさげ。AppKeyをURI内に組み込めばよさげ。

Windows 7(Vistaでも一緒)をDLNAサーバにする時のフォルダセキュリティの注意点


Windows 7(Vistaでも一緒)のWindows Media Player 12でコンテンツを管理しながら、使っているPCをDLNAサーバににして、モバイル端末やPS3でコンテンツを楽しみたい場合について。

まぁ、Windows Media Player での設定方法は↓などのサイトに詳しく書いてくれているのでそちらを参考にしてほしいのだけど、

一つだけ注意点がある。

それは、「C:¥Users¥ユーザ名¥Music」にあるフォルダを追加する分には何もする必要がないんだけど、それ以外の例えば「D:¥music¥」等を追加する場合には、このフォルダのアクセス許可に「HomeUsers」のユーザ(これはグループだね)を追加してやらなければ、外部デバイスからこのフォルダのファイルにアクセスすることができない。

フォルダのアクセス許可に新しいユーザを追加する方法については、ついさっき↓のエントリで書いておいたので参考にしてほしい。




各フォルダ(もしくはファイル)のアクセス許可に新しいユーザを追加する


Windows98の時代から、フォルダのアクセス権限とは何ぞや~とか、ファイル共有を厳密に設定して~とか、社内のセキュリティを考えて~とか、そういうメンドクサイ事をやってた人間からすると、かぁっ~~~ぺっっっ(唾)的なことで改めて書くようなことでもないんだけど、あまり優しく解説してくれているサイトが見つからなかったもんで、勢いに任せて書いてみる。

Windowsは(そもそもOSなるものは全て)フォルダ単位でもファイル単位でも、アクセス権を自由に設定して、そのフォルダに入ってるものを読んだり変更したり実行したりするユーザを自由に設定できるようになっている。Linuxを触ったことがある人はわかるとおもうけど、「OS?なにそれ?ウマいの?」ってヒトは知らんし、知らんでいいことだと思う。最近のWindowsはこのアクセス権限設定の部分をWindowsやアプリが勝手にやってくれるので、とくに知らなくても困らない。

でも、とある事情から、この「アクセス許可」とか「セキュリティ」なるものを自分で触らないと出来ないことが出てくる。それは、外部機器から、自分のPCにアクセスしたいとき。つまり、iPhoneやAndoroid機などのスマフォやタブレットからPCにアクセスしたい時などだ。

さっそく、フォルダのアクセス許可を設定する方法を順を追って説明していく。ちなみに表示している画面キャプチャはWindows7のものだが、VISTAでも手順はほとんど一緒なので、良く見て操作してほしい。

【1】設定したいファイルを右クリック→プロパティ

【2】セキュリティタブをクリック

【3】真ん中にある「編集」ボタンをクリック

【4】真ん中にある「追加」ボタンをクリック



※ちなみにユーザ許可を削除する場合はこの部分で「削除」をクリックしてやればいい。

【5】一番したの「詳細設定」ボタンをクリック

【6】右端真ん中の「検索」ボタンをクリック

【7】そのPCに登録されているユーザ一覧(+グループ一覧)がでてくるので、ユーザをダブルクリック


※ここでは「HomeUsers」を追加しているが、やりたい事によって追加すべきユーザは違ってくるので注意

【8】「OK」ボタンをクリック

以上。




iPhone5テザリングをメイン回線とできるか?


もしau iPhone5のテザリングを使用してネット接続をしようとした場合、au LTEプランの制限である「月間7GB」という制限が実際にどういう値になるのか考察してみた。

前提条件として、一日のネット通信時間を10時間とみている。そしてLINEやSkypeなどでのテキスト通信など常時稼働しているアプリケーションの同期通信量を100KB/分と見積もっている。もちろんDropboxやらSkydriveなどのクラウドストレージを使っていて、ファイル同期を行っている場合にはこれが上乗せされるので注意すること。

一日当たりの通信料概算

  • ページ閲覧:300ページ × 0.5MB/ページ = 150MB
  • 動画閲覧:10本 × 50MB/1本 = 500MB
  • アプリ稼働:600分(10時間) × 0.1MB/分 = 60MB
  • 一日当たりの通信料(小計):710MB
  • 月間の通信料(合計):710MB × 30日間 = 21,300MB = 21.3GB

さて、フルフルでiPhone5テザリングを使用していると「21.3GB/月」とまったく足らない計算になる。表題を受けての結論としては「俺の場合はiPhone5テザリングだけじゃ絶対ムリ」となる。したがって、家の固定回線やらWiFiスポットと併用することになるわけだけど、その割合を単純計算すると・・・・

7GB ÷ 21.3GB ≒ 0.33 ≒ 33%

つまり一日10時間のうち、33%=3時間強までテザリングで通信可能となるわけだ。

俺の場合は、そんなに毎日モバイル環境で仕事をしているわけではないので、平均一日3時間もあれば十分だが、これいじょうとなるとauの場合は「2GBあたり2625円」という追加料金が必要になってくるが、そんなに使うんだったらWiMAX(¥3800円/月)でも契約すれば?ってなるけわけだ・・・

いまは前エントリでも書いた通り、今我が家では「WiMAX+ガラケ+iPod Touch」という組み合わせで、WiMAXを家内主回線&モバイル回線兼用で使っているのだけれど、それを「光回線等の固定回線+iPhone5テザリング」に切り替えたとしても、iPhone5テザリングを活用すれば、モバイル環境ではWiMAX無しでも困らない、ということになる。まぁiPhone5テザリングって速度でんの?ってのは気になるけどね。

「WiMAX(内外兼用)+ガラケ+iPod」運用と「家固定ネット回線+iPhone等スマフォ」運用の比較


このエントリでは「少しでもお金をかけず、モバイルも、家ネットも充実させたい」となった場合、その際に出るであろう選択肢の「WiMAX(家内外兼用)+ガラケ+iPod」運用「家固定ネット回線+iPhone等スマフォ」運用のどっちのコスパがいいのよ?というものを整理&検討してみた。

というのは、俺が「WiMAX+ガラケ+iPod」運用をしており、使用感や注意点も含めて色々と書くべきことがあったので書いてみた。後の方達の参考になれば。

費用から比較してみる

「WiMAX+ガラケ+iPod」の費用

  • WiMAX:約¥3,800/月々
  • ガラケ:約¥2,000弱/月々
  •  (↑通話はできるだけしない、としてプランSSを適用。)
  • iPod等端末:¥770/月々
  •  (↑iPod touchを購入すると下場合。費用算出根拠は以下※を参照。)
  • 合計:¥6,570/月々

※iPod touch 32GB版(第4世代)の実売価格¥18,500前後
 (↑24ヶ月割と考えると上記にプラス¥770/月々)
※au HTC社製Android端末 ISW12HT ヤフオクでの相場¥8,000前後
 (↑24ヶ月割と考えると上記にプラス¥333/月々)
※新iPad 16GB版の実売価格¥40,000前後
 (↑24ヶ月割と考えると上記にプラス¥1667/月々)

「家固定ネット回線+iPhone等スマフォ」の費用

  • 家固定ネット回線:約¥4,000/月々
  •  (↑光固定回線、キャッシュバック適用、2年間計算の費用)
  • iPhne等スマフォ:約¥6,000/月々
  •  (↑スマートバリュー等の割引制度を使わない場合)
  • 合計:¥10,000/月々

上の費用合計をみると約1.5倍の開きがある。

なお、これにプラスアルファ通話料が必要になるが、これは双方一緒なので省略する。なので実質支払い費用は双方もうすこし加算される。

また、家族割やスマートバリューなどの割引を適用できる場合が多々あるので、そこらへんを考えると費用差はもっと縮むと思われる。

費用の差を踏まえて、次にメリット・デメリットを整理

「WiMAX+ガラケ+iPod」の場合

  • ■メリット:
    • モバイルでも回線速度が結構早い
    •  (↑少しでも電波が入っていれば、携帯キャリア通信よりも早い速度がでる)
    • ノートPCやタブレットなどのモバイル機器を増やしてもネット接続に制限がない
    • 通話しながらネット接続ができる
    • スカイプや050Plus、Facetimeなどの無料通話アプリと相性がよく、通話料を圧縮できる
  • ■デメリット:
    • WiMAXの電波が意外に入らない
    •  (↑郊外にいくとほとんど入らず、建物に入るとWiMAXの電波はいきなり弱くなる)

「家固定ネット回線+iPhone等スマフォ」の場合

  • ■メリット:
    • 家でのネット回線速度が爆速
    • 外出先で「ネットにつながらない」ということがほとんどない
  • ■デメリット:
    • 回線速度が遅い
    • ノートPCやタブレットなどのモバイル機器を増設するとネット接続に制限がでる
    •  (↑テザリングの通信料に制限があったり・・・)
    • 通話中はネット通信できない

以上を踏まえて、各自が確認すべきポイントを整理

というより、「WiMAX+ガラケ+iPod」運用で行けるかどうか?について確認すべき点を列挙する。以下の確認点で一つでもNOとなった場合には、まよわず「家固定ネット回線+iPhone等スマフォ」もしくは別の組み合わせを検討するべきだ。

  • 自分の活動エリアのWiMAXは十分な速度がでているか?
  • 自宅内のWiMAX電波強度はある程度確保できているか?
  • 複数の機器類(モバイルルータ+ガラケ+端末各種)を常に持ち歩くことに対して抵抗はないか?
  • (iPod等の小型端末以外の)ノートPCやタブレットなどの機器をモバイル環境で使用するか?

ほぼWiMAXのネタになるのでTry WiMAXなどを試用して試してみることをお勧めする。

「WiMAX+ガラケ+iPod」運用にした場合の疑問点を先んじて答えておく。

GPSはイラナイ?

関西阪神間利用だが、iPod touchのWiFi位置情報取得機能でそこまで不都合を感じない。郊外であってもWiMAX可能エリアであれば、それほどの狂いなく現在位置を表示できている。またau Android機でGPSを搭載しているHTC社製ISW12HTと比べても遜色ない。というか、逆にISW12HTはGPS測位スピードが遅すぎて使い物にならないけど・・・

WiMAXのバッテリーは持つの?

まず、長時間のモバイル運用であるなら迷わずUSBのモバイルバッテリーを購入&所持すべき。ただ、単体でも6~7時間は持つので、半日程度の打ち合わせ外出レベルであれば全く問題ない。丸一日外出、となった場合は夕方以降にモバイルバッテリーが活躍するだろう。

プッシュ通知系メッセージアプリ(SMSとかメールとかメッセージとかLINEとか)ってちゃんと使えてる?

全く問題ない。WiMAX可能エリアであればiPod touchからiPhoneの番号へSMSが送信できるし、LINEもほぼリアルタイムにプッシュ通知してくる。白ロムAndroid機も同様に問題なく使えている。Skype?なにそれ?美味いの?

カメラはしょぼくない?

正直、iPhoneとiPod touchの優劣は感じない。画素数は違うが、中の描画エンジンが非常に優秀なのでどちらも非常にキレイだ。この差を気にするレベルならミラーレス小型一眼デジとかを持ち歩こうよ、ってなる。ただし、Andoroid機は個体差が激しいので注意が必要。

iPod等の端末のバッテリーは持つ?

iPodは非常に優秀。ISW12HTは正直ゴミクズ。しかし、モバイルバッテリーを共用しているので、とくに不都合を感じたことは無い。

持ち物多くて嫌にならない?

正直、そう思う事は多々ある。仕事ではノートPCとお供するのでそこまで気にならないが、ちょっと近くのコンビニに買い物、となったときに「WiMAX+ガラケ+iPod」の三つは正直シンドイのでガラケのみで外出することもある。最近はLINEで連絡を取ることが多くなったので「ガラケがお留守番」することも多くなったけど・・・・