2012-09-22

iPhone5発売ついでにWebサイト屋用のメモ

めもめも。
アプリ屋さんとか本職Web屋さんには意味のないメモ。

解像度とか

iPhone3G/3GS（iPhone）

  • 解像度：320x480[px]
  • デバイスピクセル比：1
  • CSSピクセル：320x480[px]

iPhone4/4S（iPhone Retina 3.5inch）

  • 解像度：640x960[px]
  • デバイスピクセル比：2
  • CSSピクセル：320x480[px]

iPhone5（iPhone Retina 4inch）

  • 解像度：640x1136[px]
  • デバイスピクセル比：2
  • CSSピクセル：320x568[px]
画面の向きがPortraitなら上記解像度だけど，Landscapeなら縦横逆です。

判別

UAではiOS(iPhoneOS)のバージョンしか分からない。

参考
（後半省略）（マイナーバージョンは適当にピックアップ）

  • iPhoneOS：Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)(略)
  • iPhoneOS2：Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; ja-jp)(略)
  • iPhoneOS3：Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp)(略)
  • iPhoneOS4：Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_5 like Mac OS X; ja-jp)(略)
  • iOS5：Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) (略)
  • iOS6：Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X)(略)
iPhone;の部分がiPod;とかiPad;とかなったりするよ。 （cf. userAgent一覧/ユーザーエージェント一覧等）
というわけで，解像度で判定が必要。JSなら


window.screen.height==568

で，CSSなら

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)

といったところ。（cf. iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Web，HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCH）

とりあえず

orientationがLandscapeとかPortraitとか関係なくて，AndroidやWindows Phoneの全機種対応とかどうでもよくて，単純にテキトーにPCとは別のCSSを適用させたいなら，

@import url(hogehoge.css) sreen and (max-width:568px)

とかになるのかな。多分いままでは480とかだったのを568にしちゃえ的な。max-widthは適宜max-device-widthとかにしてもいいと思う。orientation使って，がっつり別デザインも素敵かと。

それにしても

JavaScript実行20％向上は凄いですね。レンダリングも早いですね。JavaScriptで少々無茶をしてもいい気がしてきました。

その他気になったこと

  • 画像がアップロードできるようになった（&ltinput type="file">）
  • CSS3 -webkit-filterきた
  • リモート Web インスペクタ


ネタ元：iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Web，HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCH，iPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R
時刻: 0 件のコメント:
ラベル: , ,

2012-07-12

Imagine Cup2012におけるTeam Coccolo関連の情報をかき集めてまとめてみた

こんにちは，Team coccoloのWebストーカー，わたはりです。

知り合いがどんどんBIG & World Wideになっていって寂しいので情報を追いきれなくなったので，まとめてみました。

たぶん時系列順です。下に行くほど最新。

  • (2012-07-09 00:26公開)世界大会1日目までをまとめた。
  • (2012-07-09 13:54追記)世界大会最終プレゼンYouTubeを追加。ついでにいくつか修正追記。
  • (2012-07-10 15:48追記)ちょっと記事を追加。
  • (2012-07-10 15:48追記)生放送中の表彰式を追加。
  • (2012-07-10 17:??追記)表彰式までまとめた。
  • (2012-07-12 20:57追記)記事や動画を追加。
  • (2012-07-13 03:16追記)記事や動画を追加。
日本大会
出発まで
世界大会
世界大会表彰式

記事タイトルが長いって？
SEOってやつだよHAHAHA

続きを読む
時刻: 0 件のコメント:

2012-07-10

ImaginCup2012表彰式

Team Coccolo，堂々の世界第2位おめでとうございます！

お疲れ様でした。感動をありがとうございました。



↓表彰式生放送

Live video from your Android device on Ustream

結果速報！（随時更新更新終了/下に行くほど最新）
  • Greenway(ドイツ)が「環境の持続可能性賞」を受賞
  • Ingenium(イタリア)が「健康意識賞」を受賞
  • Joshua Sim(シンガポール)がITチャレンジ3位を受賞
  • Sherif Talaat（エジプト）がITチャレンジ2位を受賞
  • Alexandru Ticlea(ルーマニア)がITチャレンジで優勝
  • The Klein Team（アルジェリア）がWindows Azureチャレンジで3位を受賞
  • Complex(ルーマニア)がWindows Azureチャレンジで2位を受賞
  • Virtual Dreams Metro(ブラジル)がWindows Azureチャレンジで優勝
  • Aaltovation（フィンランド）がWindows Phoneチャレンジで3位を受賞
  • The Stack(ポーランド)がWindows Phoneチャレンジで2位を受賞
  • Vivid(エジプト)がWindows Phoneチャレンジで優勝
  • Team Flexify(ポーランド)がKinectチャレンジで3位を受賞
  • Whiteboard Pirates(アメリカ)がKinectチャレンジで2位を受賞
  • Interlab(ブラジル)がKinectチャレンジで優勝
  • Hotfix_Windows(ベルギー)がゲームデザイン(XBox/Windows)部門で3位を受賞
  • The Doers(ブラジル)がゲームデザイン(XBox/Windows)部門で2位を受賞
  • TANG Thai(タイ)がゲームデザイン(XBox/Windows)部門で優勝
  • Turtle Games(ハンガリー)がゲームデザイン(Phone)部門で3位を受賞
  • Ecosia(フランス)がゲームデザイン(Phone)部門で2位を受賞
  • Drexel Dragons(アメリカ)がゲームデザイン(Phone)部門で優勝
  • Team D-Labs(インド)がPEOPLE'S CHOICE AWARDを受賞
  • TokTok(韓国)がWindows Metroアプリチャレンジで3位を受賞
  • nLife(ウクライナ)がWindows Metroアプリチャレンジで2位を受賞
  • Virtual Dreams Metro(ブラジル)がWindows Metroアプリチャレンジで優勝
  • wi-Go(ポルトガル)がソフトウェアデザイン部門で3位を受賞
  • Coccolo(日本)がソフトウェアデザイン部門で2位を受賞
  • quadSquad(ウクライナ)がソフトウェアデザイン部門で優勝


Imagine Cup2012での，
　Team Coccolo関連の情報まとめ記事はこちら！
　→年中無休で開店休業: Imagine Cup2012におけるTeam Coccolo関連の情報をかき集めてまとめてみた
時刻: 0 件のコメント:

2011-12-05

aタグ内aタグをクリックした時のリファラとアクセスログ

hogehoge.com/start.html
<html><head></head><body><a href="proxy.html"><a href="referer.cgi">AAAAAA</a></a></body></html>


hogehoge.com/proxy.html
<html><head></head><body>test</body></html>


hogehoge.com/referer.cgi
#!/usr/bin/perl

print "Content-type: text/html\n";
print "\n";
print "$ENV{'HTTP_REFERER'}";



start.htmlから「AAAAAA」をクリックしてreferer.cgiに飛んでみる。

referer.cgiのブラウザ表示
http://hogehoge.com/start.html


httpのヘッダたち
Request URL:http://hogehoge.com/referer.cgi
Request Method:GET
Status Code:200 OK

▼Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:Shift_JIS,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Cookie:●●●
Host:hogehoge.com
Referer:http://hogehoge.com/start.html
User-Agent:Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.121 Safari/535.2

▼Response Headersview source
Connection:Keep-Alive
Content-Type:text/html
Date:Sun, 04 Dec 2011 16:25:53 GMT
Keep-Alive:timeout=5, max=18
Server:Apache/1.3.42 (Unix) mod_ssl/2.8.31 OpenSSL/0.9.8e
Transfer-Encoding:chunked



ちゃんとReferer:http://hogehoge.com/start.htmlになってる。


アクセスログはどうなってるのっと。
%more access_log_20111205 | grep --line-buffered 2011:01 | grep proxy.html

hogehoge.com IPアドレス - - [05/Dec/2011:01:25:53 +0900] "GET /proxy.html HTTP/1.1" 200 46 "-" "Mozilla/5.0 (Windows NT 6.0) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.121 Safari/535.2"

proxy.htmlもGETしてて200が返ってる。

へぇー。

プロのWeb屋さんとか鯖屋さん的には当たり前なんだろうけど，個人的に考えたことすらなかったのでメモ。
当然っちゃ当然の結果。

どうでもいいけどリファラーの正しい綴りってReferrerなのね。
HTTP_REFERERだけど，単語としてはReferrer。
7へぇー。
時刻: 1 件のコメント:
ラベル: ,

2011-12-03

OpenXインストール備忘録

OpenX（旧OpenAds（旧phpAdsNew・phpPgAds・Max Media Manager））について。
ちなみに今回はOpenX 2.8.8。

PHPと，MySQLかPostgreSQLが必要。

▼ダウンロード
Ad server solution for publishers, advertisers & networks | OpenX
↑公式
↑普通に行くと登録が必要
↑落とす

▼インストール
↑これ読めばOK
↑消えてたからinterntarchiveから観る

ざっくり言えば以下のとおり。
放り込む。
unzip
ディレクトリ名を，バージョン名消してopenxとかに変えておくと気持ちいい。
./varと./www/imagesをchmodで777に。
http://hogehoge.com/openxとかでアクセス。

言われるがままに設定。
Welcomeページから次のページに行く間に，要件満たしてるかチェックされてるっぽい。

Register with OpenXとか言われるのでOpenXにサインアップ。
これはOpenX Market accountであるらしい。
サーバにいれたOpenXとは関係ない。
ちなみに何故か「We were unable to reach the OpenX Market account registration service at this time. In order to continue with the installation process, you may continue without registering or you may try registering again on the form below. 」と言われて弾かれたので，無視して続行ボタンが現れてくれた。後からでも設定出来る模様。どうせ登録しない。

＜追記20111204＞
ユーザ名adminでログインしてみた。
hogehoge.com/openx/www/admin/plugins/以下のページが500 Internal Server Error。
これはhogehoge.com/openx/www/admin/plugins/以下のディレクトリとファイルが777になってるから。
さくらだと777は禁止。
全部chmod -R 705すると使える。多分↑の「We were unable to reach the OpenX Market account registration・・・」ってエラーもこのため。
＜／追記ここまで＞

DB設定。
ちゃんと先にMySQLのDB作っておくこと。

Configuration。
OpenXの管理者用アカウントを作成する。
なんと日本語が選べる。

Your OpenX installation is complete.って言われたらインストール＆初期設定終わり。

セキュリティーのために以下のファイルのパーミッションを400に設定する。
（DB接続情報等が記載されている。Webから設定変更する際などは一時的に600にするらしい。）

/foo.bar.com/www/openx/var/default.conf.php
/foo.bar.com/www/openx/var/YOURDOMAIN.conf.php
らしい（src: http://pc.casey.jp/archives/3384）。


▼その他


▼そのうち必要になりそうな情報
↑日本語が正しく表示されるように一部修正が必要？



備忘録だからといって，我ながら読みにくい記事だと思う。ulとかliとか使えと。
時刻: 1 件のコメント:
ラベル:

2011-11-08

今年もなんとか

var my_age=0;
for(var i=0;i<0x15;i++){
my_age++;
}
document.write(my_age);
時刻: 0 件のコメント:

2011-10-16

そういや書いてないわ

ブログ。

と思いだしたので，そのうち書くことまとめておこう。

  • iPad2買った話(2011/04/28)
  • MacBookAir買った話(2011/08/04)
  • 夏休みに日本うろちょろしてた話
    • 四国旅行の話
  • ぼんぼり祭行ってきた話
  • ウォーターサーバー導入した話
  • iPhone4Sを買った話(2011/10/15)
  • GV-MVP/XZ2を買った話
時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)

IO-DATA HDL-LEシリーズで古いNASからデータコピーするときには、SMB1を有効化すること

自宅NASのリプレイスをしている。 IO-DATA HDL2-A4.0R(HDL2-ARシリーズ)から IO-DATA HDL2-LE04 (HDL-LE シリーズ)にデータコピーをした際に直面したエラーについてメモしておく。 HDL-LEのデータコピー機能を使って古いNASから...