スマホ対応、IE8対応

2012/5/29 [17:43:43] (火) 天気

この雑記帖。こないだは、IEはもう止め止め、ここはHTML5の実験にする、とか言ったんだけど、現実的にはIE8はまだまだ全然主流で、どこかの記事では、日本でのシェアは60%程度で、圧勝。ここのような辺境のブログのアクセスログを見ても、IE8は無視できないのでありました。

てことで、検索してみたら、ぞろぞろ出てくる、HTML5のIE8対策。WEB制作会社などは死活問題。クライアントとか、声のでかいだけの上層部に振り回されて、現場は阿鼻叫喚吐血の図、というのが想像に難くない。心中・胸中お察しします。

とりあえず、ここも対応できるなら対応するに越したことないよね、ということで。

html5で書いたサイトをie8にも対応させる。


スタイルシートで新要素をブロック要素にする。


article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary
{ display:block; }

グーグルのjavascriptを読み込ませる

http://html5shiv.googlecode.com/svn/trunk/html5.js

こいつは、html5以降の新要素をcreateして認識させる…て、よくわからんので、使い方としては呪文でよろしい。


さらにhtml5とは違うけど css3で追加された角丸などを ie8 に適用するのに

https://github.com/lojjic/PIE/downloads

PIE.htc というのをダウンロードして、サーバーのどこか適当なところに置く(わたしは css と同じ場所に)

そしたら、角丸を使っているところすべてにいちいち


behavior:url("PIE.htc");
position:relative;

を書いていく。PIE.htcのurlは呼びだされるページからの相対パスか、絶対パス。


以上で、html5とcss3をie8に対応させることができた、かな。


スマホ対応も探してみた。

http://dev.screw-axis.com/doc/jquery_mobile/


いや、いまどき、スマホのリクエストが多いので、ちょっと勉強も兼ねて、というスケベ心満載。

jquery.mobileというフレームワーク(?)を使えばあっさりさっくり。これ、ほとんどブロック。昔懐かしの電子ブロックのようなもの。用意されている部品をマニュアル通りに書いていけば、PC版のサイトをあっさり短時間でモバイル、スマホ対応にできてしまう。


スマホに搭載されるブラウザに対応イコールwebkit対応なので、なにもこのフレームワークを利用しなくても、HTMLとCSSを書けばいいんだけど、このフレームワークは、いわゆるスマホのお作法・流儀・デザイン・エフェクト・UIを提供してくれてる。専用アプリ同様の風味なのだ。

ここ、すごく大事なところだと思っていて。

PCとスマホなどのモバイルとでは、見ることになる情報が同じでも、ユーザーの距離感が違う。肌感覚とかいうと胡散臭いけど、対デバイスの距離というか。

なので、PC版をそのまま持ってきても違和感がつきまとう。弱ったなあ、と思ってたところにこのフレームワーク。

今日、それこそ2時間ほど眺めてただけで、とりあえずこの雑記帖のスマホ版をでっち上げることができた。細かいところはまだこれからいじるとしても、2時間程度で移植できたということが、このフレームワークの凄さだなあ。

文字数の制限なんか動的にプログラムでごそごそやってたのを面倒みてくれるし、1pxの影なんてcssでうんざりしてたのを面倒みてくれるし、プログラム的なところもデザイン的なところも両方ともフォローしてくれてる。

いやもう、今日、絶賛。


jQuery Mobile

『jQuery Mobile』

ジョン・リ-ド

[更新]2026-02-03 08:59:04

個人情報をちょっと防衛

2012/5/28 [18:11:38] (月) 天気

クラウドだWEBサービスだ、これが便利、意識の高い人間ならこれだ!みたいなこと言っちゃってる記事もあるけど、わたしはグーグルだろうがアマゾンだろうが、ネット企業は信用しない。ていうか、ネットの生い立ちからすると、ネット上にプライベートな場所などありえない。

なので、漏れると困るような情報は、ローカルPCか手帳。WEBにあげるなんてとんでもない、と思ってる。


とはいえ。WEBで営業するとか、自分宣伝するとか、通販するとか。そういった場合に、続きはWEBで、というわけにはいかない。メールアドレス、住所、電話番号などをWEBサイトに掲載する必要が出てくる。具体的に言うと、特定商取引にもとづく表示は、連絡先、電話番号の表示が決められている(ネット上で販売してたり、サービス提供して金銭のやりとりが生じるのに、特定商取引の表示がないようなサイトは、法律違反)


提供しているものを求める顧客に情報を開示するのは当然だし、むしろそれが目的だからいい。問題が、ロボットや名簿収集業者による地引網的な情報収集。

このブログのプロフィールや、創作文芸見本誌会場HappyReading の特定商取引にもとづく表示といった個人情報は、現時点で、簡単にコピペできない、ロボットによる自動収集ができないように小細工してある。


個人情報防衛策Tipsってやつだ。


その0.

ページに表示するのは ajax 経由。

その1.

javascriptがONになっていていないと表示しない。

その2.

jQueryを利用して、コピーできなくする。

その3.

ajaxで呼び出されるスクリプト側でリファラやbotなどのチェック。など、ロジックをいれて、ページ表示をコントロール。


これだけで、少なくとも現時点では、クローラによる収集を回避。ひとを使った収集も、コピペができないので面倒になっている。

やり方次第で、無防備無自覚に、個人情報をばら撒くことは避けられるので、プロバイダなどに問い合わせてもいいかも。


体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

『体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践』

徳丸 浩

[更新]2026-02-03 08:59:22

ブログをhtml5で書き換えてみる

2012/5/27 [22:13:42] (日) 天気

とりあえず。この雑記帖をhtml5で書き換えてみようと思い立つ。いや、仕事を取るのに、html5の案件も増えつつあるのだ。で、この雑記帖。もうかれこれ10年以上使い続けてきていて、ベースがテキスト、というかcsv。気がつけば4Mを超える大きさ。駄文譫言の積み重ね。ついでにこれをデータベースに置き換えることにした。lolipopのmysqlは重くて使い物にならんので、やっぱりsqliteに。


解説ページを見ながら、セクショニングタグとか初耳の単語に戸惑いつつ、エディタでゴリゴリ書いてそこそこの形になったな、クロスブラウザチェックもやるか、とIE8で見て仰天。IE8はhtml5のタグを解釈してくれない。検索して調べてみると、html5をIE8に対応させるためのjavascriptなんてのがある。


またIEだ。うんざり。


どうせ、アクセスの少ない辺境のブログだ。IEなんぞ切って捨ててしまうことにした。

小さなスタートアップが、IEを捨てて10万ドル以上節約した という心温まる記事もある。


とはいえ、日本だとIEのシェアは50%以上あるという記事もある。仕事となるとIEに対応しなきゃいけないので、html5は時期尚早、だろうなぁ。ここは実験場ということで。


まだまだデザインがしょぼいし、作っていない機能もいくつかあるので、試運転中。



[06/08 10:42:56]

html5に書き換える、の続きはこちら↓

スマホ対応、IE8対応 http://t2aki.doncha.net/?id=1338281023


[05/27 23:53:13]

1998年を見ると、司馬遼太郎とかジョージ・ロイ・ヒルとか。相変わらずだなあ。


入門 HTML5

『入門 HTML5』

マ-ク・ピルグリム

[更新]2026-02-03 08:59:38

ちょっと勉強すれば誰でも作れる

2012/5/22 [22:26:11] (火) 天気

WEBサービスの話だ。

phpを久しぶりに触ってみて思ったんだけど、perlにしろphpにしろ、以前少しだけ触ったrubyにしろpythonにしろ、WEBサービスに使われているような言語は、習得・修得のハードルが低い。誰でもちょっと勉強すればWEBサービスは作れる。フレームワークがわからなくても、functionをベタに並べて書いていくだけで、カタチになる。実際、プログラムなんて勉強もしたことのないわたしでもいくつかWEBサービスを作って公開している(ソースコードはぐちゃぐちゃだけどね)

なもんで、いまどき、WEB用のライトウェイトランゲージが使えると言っても、なんのアドバンテージにもならない。開発言語はどうでもいい。


それよりも。

何をしたいのか、何を作りたいのか、どんなユーザーを対象にするのか、そのためにどんな知識が必要で、作りたいものに密着した利便性を考えてどんな機能を作るのか、WEBサイトの使い勝手はどうするのか。

で、さらに、使ってもらうために、集客・そこにひとを集めるのはどうするの。

誰でもWEBサービスを作って公開できるとなると、最先端の技術を投入してスゲーの作ったらから使って、なんてのは的外れなだけ。使う側は技術になんて興味はない。はてなブログの失敗はそこだろう。

自分の興味対象に対して、強い動機があって初めて、使ってみたいものができる。痒いところに手が届く、を、そこきたか、と思わせるものができる。

以前から言ってるように、WEBサービスなんてのはしょせんただのガワ、ウツワ。何を入れるのか、どうすれば思ったように入ってくれるのか、そこを考えられる資質こそ必要。


WEBサービスとして、それで金になるかどうか・社会貢献できるかどうかも含めて、面白いかどうかの判定できるようにしたいもんです。


いや、一言でいうと、なんか面白いことしたいよー、というだけの話。


Twitter・Facebook・YouTube・Ustream── ”ソーシャル”なサイト構築のためのWeb API コーディング

『Twitter・Facebook・YouTube・Ustream── ”ソーシャル”なサイト構築のためのWeb API コーディング』

MdN編集部

[更新]2026-02-02 15:14:47

仕事のないフリーランスはただの無職だ

2012/5/21 [11:13:50] (月) 天気

フリーランス、個人事業主とかいって、子供の小遣いにもなってないんじゃ、ただのゴクツブシ。

ネットの案件マッチングサイトに登録して、チェックをしてるんだが、先日書いたように、要求されるのはphp(それもフレームワーク前提)で、ソーシャルアプリの作成、EC-CUBE(ECサイトのパッケージ)やwordpressのプラグインなど機能追加・修正、facebookのアプリ。さもなきゃ、javaでスマホのクライアントアプリ。いちからサイトを構築する案件もあるんだけど、そうなると今度は文字通りで、デザインからシステム構築までとなり、個人がひとりで受けるには重すぎる。そもそもグラフィック系のデザイン作成、素材作成は、苦手・無理。


HTMLとCSSでページのコーディングならやれるので、提案するけど、競争率も高く、ダンピングして受けることになる。

キャンペーンなどのランディングページ。一枚絵をもらって(イラレなど)それを切り出してHTMLとCSSでコーディングして、一ページ3000円以下。


perlなら、創作文芸見本誌会場HappyReading趣味は読書2 、このブログなど、いちから設計、構築、デザインコーディングまで、できるんで。

既存サイトに会員管理機能をつけ足したい、とか、新規サイトにメール送信管理をつけてみたい、なんてリクエストにperlでベタベタ書いていく、というようなものがあれば飛びつきたいところ。って、そんな都合の良い話もない。


なもんで、phpとcakephp、mysqlをインストールして、チュートリアルを眺めて、phpのお勉強も始めた。…けどなあ、作りたいものがないのに、身が入るわけもなく。

勉強と実績作りを兼ねて、ボランティアで、phpを使ったサイト作りに参加できればありがたいんだけど…。うーむ。


てことで、平行して、ハローワークをはじめ、IT系の人材派遣会社など登録しての職探し。

51歳、使いものにならんもんですなあ。とほほ。

[更新]2026-02-02 15:15:09

<<2012/05>>
  12345
6789101112
13141516171819
20212223242526
2728293031

【最近の10件】

日常読書映画アニメゲーム健康料理グルメカメラ写真ネタ仕事パソコンインターネットperlEPUB3電子書籍ActivityPub
検索: