DevAchieve: 6月 2012 プログラミングで世界を開拓して未来を実現するブログ

2012/06/30

[書評]iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン
 Josh Clark
オライリージャパン
発売日：2011-06-18

ブクログでレビューを見る»
iPhone/Android関係なく全てのスマホアプリ開発者が読むべき本。
デザインと言うからエンジニアは敬遠しがちだと思うが、
機能美と言えばエンジニアがこだわるべき事だと認識してもらえると思う。
この本のdesignの意味は芸術的な見た目ではなく、設計のことだ。
帯に「デザイン≠アプリの見た目」「デザイン=アプリの機能+性能+UI」と書いてあることからもわかる。
本書を読めば今までのアプリを一新したくなるほどデザインについて学ぶことができる。

iPhoneアプリ設計の極意サポートページ — 目次 — マーリンアームズ株式会社

ご購入検討中の方へ
アプリが売れなくて困っている人――この本を読んで売れるアプリに変えましょう
アプリを開発中の人――この本を読んでもっとよいアプリを完成させましょう
これから開発する人――まずこの本から始めましょう
Androidアプリ開発者――この本を参考にiPhoneアプリに負けないモノを作りましょう
アプリの舞台裏を知りたい人――この本でアプリがどんな風に作られているのかがわかります
iPhoneを徹底活用したい人――この本でとっておきのテクニックを学びましょう

そのほか、下記のような方々にもおすすめです。
iPhoneのいろいろなアプリを知りたい方
Appleの『ヒューマンインターフェースガイドライン』を、マニュアル的な文章でない文章で読みたい方
Apple（Apple製品）が好きな方
Apple製品がなぜ美しいのか知りたい方
いろいろなアイディアに触れるのが好きな方

エンジニアは本書からスマホに特化した機能美を学ぶことのできるだろう。
デザイナーは機能美を理解してこそ、いわゆるデザインを創れるんじゃないかと思う。
どっちかというと機能美というよりインダストリアルデザインかな？あまり一般的な言葉じゃないけど。
エンジニアがいわゆるデザインをできなくてもいいけどインダストリアルデザインはできなきゃダメだと思う。
デザイナーの立場はなったことがないからわからん。でも知らないでデザインってダメだよね。
つまりスマホアプリ開発者は必修教材なわけです。
O'Reilly Japan - iPhoneアプリ設計の極意で7章がPDFで丸々見ることができるので読んでおきましょう。

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

2012/06/24

IE対応済み！今すぐコピペして使えるHTML5テンプレート

HTML5が流行り始めて結構経ちました。
個人的にもHTML5でサイト制作したいなーと思っていたので
まずはHTML5のテンプレートを用意しました。
最近のサイト制作ではjQueryを使うことが多いようなので
jQueryも対応しています(ハイライト部分)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <!--[if lt IE 7]>
        <p class="ie_fuck">お使いのブラウザは<strong>古い</strong>ため、表示が崩れることがあります。
        <a href="http://browsehappy.com/">他のブラウザ</a>を使うか、<a href="http://www.google.com/chromeframe/?redirect=true">Google Chrome Frame</a>をインストールすることで正しく表示することができます。</p>
    <![endif]-->

    <!-- page content -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="js/script.js"></script>
  </body>
</html>

解説

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Google Chrome Frameという色々な制限によってアップデート出来ない環境にあるIEのためのプラグインです。
ユーザーがGoogle Chrome Frameを入れている場合に対応するためのmetaタグです。
Chrome Frame: Developer Guide - The Chromium Projectsによるとchrome=1では常にChromeとして表示し、
Chrome=IE6と指定するとIE6以下だけChromeとして表示し、それ以外のブラウザではそのまま表示するそうです。
参考：Google Chrome Frame FAQ - The Chromium Projects
Google Chrome Frame plugin - Google Chrome ヘルプ

<meta name="viewport" content="width=device-width">

iOSでページ幅と初期倍率などを設定する場合に指定します。
詳しい指定の仕方はSafari HTML Reference: Supported Meta Tagsを参照。

<!--[if lt IE 9]>
    <script src="js/html5.js"></script>
<![endif]-->

まず、11, 13行目はバージョンベクタと言ってIE判別に使うコードです。
12行目はIEでもHTML5の新要素に対応するためのJavaScriptです。
他にも印刷で崩れないようにしたり、新要素のデフォルトのスタイルを指定したりしているようです。
html5shiv - HTML5 IE enabling script - Google Project Hostingからダウンロードすることができます。
設置場所は<body>より前(例えば<head>内)でなければならず、パフォーマンス上CSSの後がオススメだそうです。
参考：CSSでIEの特定バージョンだけに対応する簡単な方法 | 某氏のたわごと NEXT
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ | コリス
HTML5入門－html5.jsでIE対応－｜mayy

追記(2012/06/28 7:27)

html5.jsはZIPをダウンロードしてdist/html5.jsを使ったほうが良いとされていましたのでコードを変更しました。
理由はコチラが詳しいです→IE対応でよく利用するhtml5shivの使用方法変更について｜Blog｜Skyward Design

<!--[if lt IE 7]>
    <p class="ie_fuck">お使いのブラウザは<strong>古い</strong>ため、表示が崩れることがあります。
    <a href="http://browsehappy.com/">他のブラウザ</a>を使うか、<a href="http://www.google.com/chromeframe/?redirect=true">Google Chrome Frame</a>をインストールすることで正しく表示することができます。</p>
<![endif]-->

つまり何が言いたいかってのはクラス名の通り。むしろ[if IE]でもいいんじゃないですかね。
IEだけCSSがちゃんと動かないとかIEのためのCSSハックとかファックですよね。

教訓。IE9とか結構モダンなブラウザになってるんでしょ？とか思って安請け合いしてはいけない。IE対応入ったら工数に1.6かけること。IE8以下対応入ったら2.2かけぐらいにすること。IE6対応入ったら3.5かけくらいにすること。
— わかめさん (@vvakame) 5月 14, 2012

個人的には切り捨てちゃうんだけど仕事だとそんな事言ってられないので工数いっぱい欲しいですね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

Initializr - Start an HTML5 Boilerplate project in 15 seconds!で生成されるHTML5テンプレートにあった書き方。
23行目でCDN(コンテンツデリバリネットワーク - Wikipedia)から読み込んでいる。
CDNはなんか最適化されていて高速らしいし、ブラウザのキャッシュが効くのでロード時間の短縮が期待できるとか。
24行目で読み込めているかチェック＆読み込めてなかったら自分のを読み込む処理を書いているらしい。
参考：jQueryをロードする際のナイス！と思った書き方

一応これで今すぐ使えるはず。HTML5/CSS3対応のリセットCSSやノーマライズCSSについては今度まとめたい。

追記(2012/06/30):<meta name="format-detection" content="telephone=no">について

@wada811 ご丁寧にご連絡ありがとうございました。<meta name="format-detection" content="telephone=no">　とかいれておくと良いかなーと思ったりはしていますが、そこはお任せいたします。
— Minoru Hayakawaさん (@eriver) 6月 28, 2012

アドバイスを頂いたのですが知らなかったのでググってみました。
iPhoneのSafari用のメタタグで、電話番号リンクに自動変換するのを制御するものだとか。
この電話番号への自動変換が結構アホの子らしくてIPアドレスとか小数が誤認識されるので付けたほうがいいみたいです。
参考：iPhone向けSafari、HTML拡張属性を使いこなす | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報

2012/06/19

[競技プログラミング][PHP][AtCoder]割り切れる日付

[競技プログラミング][C言語][AtCoder]割り切れる日付 | DevAchieveをPHPで解き直した。

回答

AtCoder/arc002_2.php at master · wada811/AtCoder

今回はC言語みたいに計算でやらずにPHPの関数で頑張りました。
とりあえず2種類の方法で通したので両方載せる。

<?php
    fscanf(STDIN, "%s", $date);
    while(true){
        $splits = explode("/", $date);
        $year = $splits[0];
        $month = $splits[1];
        $day = $splits[2];
        $quotient = $year / $month / $day;
        if(floor($quotient) == ceil($quotient)){
            break;
        }
        $date = date("Y/m/d", mktime(0, 0, 0, $month, $day, $year) + 86400);
    }
    echo $date."\n";
?>

explode関数で文字列を分割して年月日をそれぞれ取得する。
割り算を計算して、割り切れない場合は商が小数になるので
floor関数とceil関数で小数点以下を切り捨て/切り上げした結果が異なる。
その場合はmktime関数でUNIXTIMEに変換して一日(24*60*60=86400秒)を足す。
新しいUNIXTIMEに対してdate関数でフォーマットを指定して日付を生成して繰り返す。
これを割り切れるまで(商が整数になりfloor関数とceil関数の結果が同じになるまで)やります。

UNIX時間 - Wikipedia
UNIX時間（ユニックスじかん）またはUNIX時刻（ユニックスじこく、UNIX time、POSIX time）とはコンピューターシステム上で日時を表す単位。UTCでの1970年1月1日真夜中（0時0分0秒）からの経過秒数（閏秒を加味しない）で表される。
UNIX系オペレーティングシステムだけでなく、他の多くのオペレーティングシステムにおいてもこの単位が用いられている。システム内部では32ビットまたは64ビットの符号付整数（signed int）で扱われていることが普通であり、特に32ビットで扱われている場合においては符号付整数が取れる最大値 2,147,483,647 を超える時点で時刻を扱えなくなるという問題がある。これを2038年問題という。

ということでUNIXTIMEで計算してるとそのうち面倒な事になるんじゃないの？ってことで違う方法でも解いてみた。

<?php
    fscanf(STDIN, "%s", $input);
    $splits = explode("/", $input);
    $date = new DateTime();
    $date->setDate($splits[0], $splits[1], $splits[2]);
    while(true){
        $year = $date->format("Y");
        $month = $date->format("m");
        $day = $date->format("d");
        $quotient = $year / $month / $day;
        if(floor($quotient) == ceil($quotient)){
            break;
        }
        $date->add(new DateInterval("P1D"));
    }
    echo $date->format("Y/m/d") . PHP_EOL;
?>

ロジックは同じ。DateTimeオブジェクトのインスタンスを生成して、setDateメソッドで年月日をセットする。
フォーマットを指定してformatメソッドで値を取得する。
日付の加算はaddメソッドの引数にDateIntervalオブジェクトを渡して行う。
DateIntervalの引数の書式はPHP: DateInterval::__construct - Manualを参照のこと。

どこでも動いたほうがいいよねってことでそのプラットフォームでの改行コードを表すPHP_EOLも使ってみた。

PHP 逆引きレシピ (PROGRAMMER’S RECiPE)も良かったけど日付関連が前者のやり方だったので
後者のやり方を解説しているというパーフェクトPHP(PERFECT SERIES 3)が欲しい。

参考
手を動かして覚えるPHP 5.3新機能日付(DateTime,DateInterval)編 | Act as Professional
PHP 5.3 の DateTime オブジェクト関連の便利な新機能 - 肉とご飯と甘いもの @ sotarok

追記(2012/09/01):DateTime::createFromFormatの方が簡潔だった

<?php
fscanf(STDIN, "%s", $input);
$date = DateTime::createFromFormat('Y/m/d', trim($input), new DateTimeZone('Asia/Tokyo'));
while(true){
    $year = $date->format("Y");
    $month = $date->format("m");
    $day = $date->format("d");
    $quotient = $year / $month / $day;
    if(floor($quotient) == ceil($quotient)){
        break;
    }
    $date->add(new DateInterval("P1D"));
}
echo $date->format("Y/m/d") . PHP_EOL;
?>

まだまだ修行が足りない。PHP力が低いなードキュメントは見るようにしてたのだけども…。

パーフェクトPHP (PERFECT SERIES 3)

2012/06/18

[競技プログラミング][PHP][AtCoder]うるう年

[競技プログラミング][C言語][AtCoder]うるう年 | DevAchieveをPHPで書いてみた。

回答

AtCoder/arc002_1.php at master · wada811/AtCoder

C言語て解いたように以下の条件で分岐しても良いんだけどcheckdate関数を使ってみた。

西暦年が4で割り切れる年はうるう年
ただし、西暦年が100で割り切れる年は平年
ただし、西暦年が400で割り切れる年はうるう年

<?php
    fscanf(STDIN, "%d", $year);
    if(isLeapYear($year)){
        echo "YES\n";
    }else{
        echo "NO\n";
    }
    
    function isLeapYear($year){
        return checkdate(2, 29, $year);
    }
?>

2012/06/17

[競技プログラミング][PHP][AtCoder]2点間距離の最大と最小

B - 2点間距離の最大と最小 ( Maximum and Minimum )

時間制限 : 2sec / スタック制限 : 10MB / メモリ制限 : 64MB

問題文

平面上に N+1 個の点があり、それぞれ 0 から N までの番号が付けられています。
それぞれの点の位置はわかりませんが、0 以上 N 未満の整数 i について、
i 番の点と i+1 番の点の距離 di はわかっています。
0 番の点と N 番の点の距離としてとりうる値の最大と最小を求めてください。

入力

入力は以下の形式で標準入力から与えられる。

N
d0
d1
:
dN−1

入力は N+1 行からなる。
1 行目には点の番号の最大を表す整数 N (1 ≦ N ≦ 500) が与えられる。
2 行目から N+1行目までの i+2 行目 (0 ≦ i < N)には、
i 番と i+1 番の点の距離を表す整数 di(1 ≦ di ≦ 30,000) が与えられる。

出力

出力は標準出力に出力し、2 行からなる。
1 行目には、0 番の点と N 番の点の距離としてとりうる最大値を出力せよ。
2 行目には、0 番の点と N 番の点の距離としてとりうる最小値を出力せよ。
誤差は絶対誤差あるいは相対誤差の少なくとも片方が 10^−3 以下であれば許容する。
なお、最後には改行を出力せよ。

出典

B: 2点間距離の最大と最小 ( Maximum and Minimum ) - AtCoder Regular Contest #004 | AtCoder

回答

AtCoder/arc004_2.php at master · wada811/AtCoder · GitHub

最大は直線の場合だから合計すればいいとして最小が思いつかなかったから
他の人のC言語の回答を見たのだけれど見たら納得。何故思い浮かばなかったのかと…。
一番長い距離に対して他の距離の合計が大きいか小さかだけを考えれば良かったんだな…。
イメージは三節棍(すべての長さが同じだからちょっと違うけど)で、
一番長い距離に対してその他の合計のほうが小さければ直線的な距離の比較だし、
合計のほうが大きければ節の角度を変えて端をくっつければ最小の距離は0にできる。
コレは思い浮かべたかったなー。

てかPHPで配列のソートって簡単ですね。
ロジックだけわかれば書くことがほとんどなくて楽だけどアルゴリズムに弱くなりそう。

2012/06/16

[競技プログラミング][PHP][AtCoder]2点間距離の最大値

A - 2点間距離の最大値 ( The longest distance )

時間制限 : 2sec / スタック制限 : 10MB / メモリ制限 : 64MB

問題文

平面上に N 個の点があり、それぞれ 0 から N−1 までの番号が付けられており、
それぞれの点について x 座標と y 座標が与えられています。
その N 点のうち 2 点を選び結んで得られる線分のうち、最も長くなる線分の長さを求めてください。

入力

入力は以下の形式で標準入力から与えられる。

N
x0 y0
x1 y1
:
:
xN−1 yN−1

入力は N+1 行ある。
1 行目には、点の個数を表す整数 N(2≦N≦100)が与えられる。
2 行目から N+1 行目までの i+2(0 ≦ i < n) 行目には、
i 番の点の x 座標を表す整数xi(0 ≦ xi ≦ 100)と y 座標を表す整数yi(0 ≦ yi ≦ 100)が空白を区切りとして与えられる。
与えられる点のうち x 座標と y 座標がともに一致する点の組は存在しないが、
2 つの点を繋ぐ線分上に他の点が存在することはありうる。

出力

N 点のうち 2 点を選び結んで得られる線分のうち、最も長い線分の長さを標準出力に 1 行で出力せよ。
誤差は絶対誤差あるいは相対誤差の少なくとも片方が 10^−3 以下であれば許容する。
なお、最後には改行を出力せよ。

出典

A: 2点間距離の最大値 ( The longest distance ) - AtCoder Regular Contest #004 | AtCoder

回答

AtCoder/arc004_1.php at master · wada811/AtCoder · GitHub
問題ページに式まで書いてあるのでpow関数とsqrt関数でそのとおりに計算するだけ。

A問題は簡単だったけどB問題で最小を求めるロジックが思い浮かばなかった。
そのうち他の人のコードを見てロジックを確認したい。悔しい。

2012/06/14

[競技プログラミング][PHP][AtCoder]リモコン

PHPで[競技プログラミング][C言語][AtCoder]リモコン | DevAchieveを解き直した。

回答

AtCoder/arc001_2.php at master · wada811/AtCoder · GitHub

<?php

    fscanf(STDIN, "%d %d", $a, $b);
    $temperature = abs($a - $b);
    $count = 0;
    
    while($temperature){
        if($temperature >= 8){
            $temperature -= 10;
        }elseif($temperature >= 3){
            $temperature -= 5;
        }else{
            $temperature--;
        }
        $temperature = abs($temperature);
        $count++;
    }
    
    echo $count."\n";
    
?>

流石にC言語でやったような形式で解くのは面倒なのでちゃんと書いた。
充実した関数たちを簡単に存分に使えるのは楽でいいですねー

[競技プログラミング][C言語][AtCoder]パズルのお手伝い | DevAchieveを
そのままPHPに書きなおした↓けど一部エラーが出たので誰か原因が分かる人教えて下さい。
Submission #22186 - AtCoder Regular Contest #001 | AtCoder

2012/06/13

[競技プログラミング][PHP][AtCoder]センター採点

勉強がてらに[競技プログラミング][C言語][AtCoder]センター採点 | DevAchieveをPHPで書いてみた。

回答

AtCoder/arc001_1.php at master · wada811/AtCoder · GitHub

<?php

    fscanf(STDIN, "%d", $q);
    fscanf(STDIN, "%s", $answer);

    $counts = array(
        preg_match_all('/1/', $answer, $matches),
        preg_match_all('/2/', $answer, $matches),
        preg_match_all('/3/', $answer, $matches),
        preg_match_all('/4/', $answer, $matches)
    );

    echo max($counts).' '.min($counts)."\n";

?>

PHPでの標準入出力のやり方がわかったのでなんとかなりそう。
preg_match_all関数で簡単に文字列の一致個数を取れるので
C言語とは違った解法で解くことができるのが楽しい。
出力もmax関数やmin関数が配列を渡すと要素の中で最大最小を返してくれるので楽。
ドルマークをつけるのが面倒くさい事以外は満足。
PHPの環境構築してサブミットしなくてもテストできるようにしたい。

2012/06/12

[競技プログラミング][C言語][AtCoder]さかさま辞書

B - さかさま辞書

時間制限 : 2sec / スタック制限 : 10MB / メモリ制限 : 64MB

問題文

高橋君は友達とチャットで逆さしりとりをすることにしました。
逆さしりとりとは、前の人が言った単語の頭文字で終わる単語を答えるしりとりです。
しかし、高橋君は英単語に自信がないのでこっそり「さかさま辞書」を使うことにしました。

普通の辞書は単語の先頭の文字がABC順になるように並べられており、
同じ文字同士の場合はその次の文字がABC順になるように並べられます。
先頭から見ていく普通の辞書順に対して、「さかさま辞書」は後ろの文字から見ていきます。
例えば apple, bee, card は、普通の辞書なら apple → bee → card の順になります。
しかし、「さかさま辞書」では d で終わる card が 1 番、
apple とbee は同じ e で終わるのでその 1 つ前が e である bee が 2 番、l であるapple が 3 番の順になります。

図(a)：普通の辞書順に並べた例　　図(b)：さかさま辞書順に並べた例

高橋君の代わりに「さかさま辞書」を作成し、与えられた単語を「さかさま辞書」順に並べてください。

入力

入力は以下の形式で標準入力から与えられる。

N
s1
s2
:
:
sN

1 行目は、並べる単語数を表す整数 N(1≦N≦100) が与えられる。
2 行目から N 行は、並べる単語を表す文字列が 1 行に 1 つずつ与えられる。
i+1 行目の文字列 si の長さは 1 文字以上 20 文字以下で、含まれる文字はアルファベットの小文字のみ(a-z)です。
なお、重複する単語が与えられることはありません。

出力

入力として与えられた単語を、さかさま辞書順に標準出力に 1 行ずつ出力せよ。
なお、最後には改行を出力せよ。

出典

B: さかさま辞書 - AtCoder Regular Contest #003 | AtCoder

回答

AtCoder/arc003_2.cpp at master · wada811/AtCoder
配列の中身の文字列を逆順にしてソートしてもう一回逆順にして戻して表示すればOK。
流石に同じ配列内でやるのは面倒なので反転用の配列を用意した。
PHPを始めたから関数名がPHPっぽくなってる。
main関数だけ見るとロジックだけ書かれてて日が経っても把握しやすくて良いなぁと思った。

2012/06/11

[競技プログラミング][C言語][AtCoder]GPA計算

A - GPA計算

時間制限 : 2sec / スタック制限 : 10MB / メモリ制限 : 64MB

問題文

高橋君はアメリカに留学しようと考えており、成績表を提出することになりました。
アメリカ留学の成績表には、学力を測る指標であるGPAを表記する必要があります。
GPAとは各単位に対する評価(A,B,C,D,F)を点数に換算して平均した値で、点数への換算は以下のようになります。
A評価 → 4 点
B評価 → 3 点
C評価 → 2 点
D評価 → 1 点
F評価 → 0 点
全てF評価だった場合は、GPAは 0 になります。
高橋君の各単位に対する評価をもとにGPAを求めなさい。

入力

入力は以下の形式で標準入力から与えられる。

N
r1r2…rN

1 行目は、単位の総数を表す整数 N(1≦N≦100) が与えられる。
2 行目には、単位に対する評価を表す N 文字の文字列が与えられる。
i 文字目の文字 ri は A, B, C, D, F のいずれかである。

出力

入力として与えられた単位の評価をもとにしたGPAを標準出力に 1 行で出力せよ。
誤差は絶対誤差あるいは相対誤差の少なくとも片方が 1e^−9 以下であれば許容する。(1e^−9=10^−9)
なお、最後には改行を出力せよ。

出典

A: GPA計算 - AtCoder Regular Contest #003 | AtCoder

回答

AtCoder/arc003_1.cpp at master · wada811/AtCoder · GitHub
アスキー文字の差分取ってswitch文でbreakしないで流すのは上手いことやったと思ったわー
例題の精度ミスと変換修飾子の良い指定の仕方の模索に時間を喰った記憶がある。
double型で小数点以下に0が続く場合にその0を省いて表示するにはgをつければ良い。
普段使わないからこれを見つけるのに一番時間かかった。

2012/06/10

[競技プログラミング][C言語][AtCoder][ふか杯]流れ

C - 流れ

時間制限 : 2sec / スタック制限 : 8MB / メモリ制限 : 64MB

Description

w*hのグリッドがある．

グリッド上のおのおののマスには，高さが設定されている．

今，いくつかのマスの上から液体を注ぐ．

あるマスの上に液体が存在し，そのマスの高さよりもそこから隣接するマスの高さの方が低いとき，
液体は隣接するマスへ広がっていく．ただし，グリッド上の2つのマスは辺を共有するときに隣接していると見なす．

液体が広がるマスの個数を求めよ．

Input

入力は複数のテストケースからなる．入力の終わりは，3つの0のみを含んだ行で示される．
各テストケースは，以下の形式で与えられる．

w h p
z00 z01 … z0(w−1)
z10 z11 … z1(w−1)
…
z(h−1)0 z(h−1)1 … z(h−1)(w−1)
x1 y1
…
xp yp

1≦w，h≦20
0≦p≦wh
0≦zij≦100
0≦xi<w
0≦yi<h
テストケースの1行目には，3つの整数w，h，pが書かれている．
w，hはそれぞれグリッドの横幅と縦幅を表し，pは液体を注ぐ回数を表す．

続くh行には，それぞれw個の整数zijが書かれている． zijは(j，i)のマスの高さを表す．

続くp行にはそれぞれ2個の整数xi，yiが書かれている． xi，yiは(xi，yi)のマスに液体を注ぐことを示す．

ただしすでに液体を注いだマスにもう一度液体を注ぐこともある．

テストケースの数は1つのファイルにつき20個以下であることが保証されている．

Output

各テストケースに対して，液体が広がるマスの個数を1行に出力せよ．

出典

C: 流れ - ふか杯 5th Contest | AtCoder

回答

AtCoder/fuka5_3.cpp at master · wada811/AtCoder
実は通ってない…。
Submission #17715 - ふか杯 5th Contest | AtCoder
サンプルのテストケースは通るけど他のテストケースが通らなくてわからなくて詰んだ。
というかサンプルがどうしてその結果になるの理解できなかった。
注いだ場所は高さが上がるのか…？

の(0, 0)に注いだら

になって、ここまでで4回。そこで(2, 2)に注いだらどうなるのか。
真ん中の2より低いところがないので広がらないから出力は4なんじゃないかと思うけど5なんだよなぁ。
よくわからないので分かる人はコメントしてくれると嬉しいです。

2012/06/09

[書評]iPhoneプログラミングUIKit詳解リファレンス

iPhoneプログラミングUIKit詳解リファレンス
 所友太
リックテレコム
発売日：2010-01-12

ブクログでレビューを見る»
iPhone/iPadアプリを開発するなら必ず読んでおきたい一冊。
InterfaceBuilderを使わずに開発する方法が詳しく載っている。
InterfaceBuilderを使う人も動的な設定変更などは
コードで指定しなければならないので設定方法が網羅されている本書は役立つはずだ。

iPhoneプログラミング　UIKit詳解リファレンス | リックテレコム書籍情報 http://www.ric.co.jp/book/contents/book_844.html

UIKit本への追加コンテンツと補足情報をこちらに追加していきます - iPhoneアプリ開発まっしぐら★
帯にはiOS4でも使える基礎知識と書かれているけどiOS5でも使えるし、
きっと今度のiOS6でも使えるんじゃないかと思う。
InterfaceBuilderが結構使えるからコードで色々設定することは少ないけど
プログラムで動的に変更するなんてことはよくあるので全iOSデベロッパーにオススメできると思う。
全部役に立つから逆に何を書いていいかわからない状態に陥るくらいに役立つ本です。
本当に何を書いていいのかわからないので
とりあえず目次でも見て役立ちそうなところを探してみればいいんじゃないかな？そして買おう！

iPhoneプログラミングUIKit詳解リファレンス - 目次
Chapter00　本書を読む前に
はじめに／UIKitとは／サンプルコードについて

Chapter01　Hello, UIKit !
いちばん簡単なHello, world!／Hello, world! をちょっとだけ改造
Interface Builder を使わないHello, world!／Interface Builderとの本当の決別

Chapter02　UIView 徹底解説
UIViewの基本／コンテンツの管理／UIViewの入れ子構造／UIViewのレイアウト／UIView の状態監視

Chapter03　UIViewControllerと画面遷移
UIViewControllerと画面／画面遷移／タブバーの活用（UITabBarController）
ナビゲーションバーの活用（UINavigationController）／ツールバーの活用
バーボタンアイテム／UIViewController と各要素の関連／UIViewController の状態監視

Chapter04　フルスクリーンと画面の回転
フルスクリーン／画面の回転／画面回転とフルスクリーンの共存

Chapter05　グラフィックス＆アニメーション
文字列の表示／フォントの指定（UIFont）／色の指定（UIColor）／画像の表示／UIView アニメーション

Chapter06　タッチ操作＆モーション
コントロールの操作／レスポンダ（UIResponder）
マルチタップ／ジェスチャーマルチタッチ／モーション／加速度センサー

Chapter07　ユーザへの通知と意思確認
アラート表示（UIAlertView）／アクションシート（UIActionSheet）／ステータスバー

Chapter08　テキストとWeb の表示
テキスト表示（UITextView）／キーボード（UITextInputTraits）／Web コンテンツ表示（UIWebView）

Chapter09　テーブル表示
テーブル表示／テーブルの情報取得／テーブルの編集
セルのカスタマイズ／セルの選択とスクロール／UILocalizedIndexedCollationの利用

Chapter10　UI部品の利用
ラベル（UILabel）／ボタン（UIButton）／テキストフィールド（UITextField）
スイッチ（UISwitch）／セグメンティッドコントロール（UISegmentedController）
スライダー（UISlider）／日付・時刻ピッカー（UIDatePicker）／ピッカー（UIPickerView）
アクティビティインジケータ（UIActivityIndicatorView）／プログレスバー（UIProgressView）
検索バー（UISearchBar）／ページコントロール（UIPageControl）／スクロールビュー（UIScrollView）

Chapter11　アプリケーション＆デバイス情報
アプリケーションの機能／デバイス情報へのアクセス／コピー＆ペーストの利用／画面サイズの取得（UIScreen）

Chapter12　カメラ撮影＆ムービー編集
カメラと写真アルバム（UIImagePickerController）／ビデオ編集（UIVideoEditorController）

パスワードとセキュリティ

最近パスワード漏洩とかで物騒ですね。
利用者側としても開発者側としても怖いです。
怖いからセキュリティについて少しだけ勉強したので知識の整理を。
勉強したてで間違ったことを書くかもしれません。
そんな時は派手に着火せずコメントでこっそり教えて下さい。

利用者側

パスワードを定期的に変更する理由は何ですか? - QA@IT

よく定期的にパスワードを変更しろって言われるけどなんで？ってことで
理由を体系的に学ぶ安全なWebアプリケーションの作り方の著者が解説しています。
パスワードがハッシュ化(元に戻せないように変換)されていれば解析に時間がかかって
その間にパスワードを変えてしまえば大丈夫って理屈から
定期的にパスワードを変えろと言われるようになったみたいです。
でも最近は頑張れば解析時間を短縮できるから「定期的に」の基準がないみたいです。

あとは、実際にパスワードが漏れてもパスワードを変えてしまえば
変えた段階で悪用が止まるという理屈だそうです。
長期的にわたる盗聴的な悪用だったら意味があるけどすぐに何かを盗んだり改竄したりするような悪用だと意味無いです。
また、長期的にわたる悪用の場合でもパスワードが漏れた段階でシステムが対策してなかったら
パスワードを変えたところで再び漏れる可能性があるのでどうしようもないですね。
利用者にできるのは会員情報などをでたらめな情報に変更してから退会とかかな？
退会したからといって情報を削除しているとは限らないので…。

ユーザーはパスワードを定期的に変えろよーとか言われても面倒臭くてやりませんよねー
それどころかいくつも登録してると面倒でパスワードを同じにしてる人いるしね。
どこかでパスワードが漏れると全部危険になるので最低限パスワードは同じにしないとしても
それらをすべて定期的に変更とか現実的じゃないということでコレはなしですね。
あんまり変更しなくてもいいから各サイトのパスワードはバラバラにして長め(12文字くらい？)にした方が良さそうです。
英単語とかはダメですよ。辞書に載っているような単語とかを総当りでチャレンジしてくるからね。

開発者側

パスワードってどうやって保存すればいいの？

平文(入力値)のまま保存するとSQLインジェクションとかで漏れたら即死だぞー！早く対策しろー！どうなっても知らんぞー！
ということで元のパスワードに戻せないように変換(ハッシュ化)して保存したほうがいいです。
ハッシュ関数というので変換するのですが、そのアルゴリズム(変換方法)には
MD5、SHA-1、SHA-256などがあるようです。
ちなみに左から順に衝突しやすい(違う値を渡して同じハッシュ値が得られる、つまり違うパスワードでも正解ということに)。
MD5とか使ってもダメみたい。せいぜいファイルの同一性チェックのイメージしか無い。
SHA-1なら大丈夫かというと必ずしもそうでもないみたい。詳しくはこのあとに書きます。
SHA-256は今のところセーフ？技術やマシンが進歩するとどうなるかわからないから怖いです。
ハッシュ関数について軽く理解したい場合は「プロになるためのWeb技術入門とかいいんじゃないですかね。

SHA-1ハッシュ化されたパスワードは安全ですか? - QA@IT

ハッシュ化してしまえば元に戻すのはできないけど、ハッシュ化すること自体はできるんだから
総当り的に文字列をハッシュ化していって一致したら元の文字列がパスワードだってわかってしまいます。
その総当たりにどれだけの時間がかかるか、の勝負になるわけです。
しかも、レインボーテーブルと言って、文字列とハッシュ値のペアを持ったDBが存在するとか。
このレインボーテーブルのハッシュ値と漏洩したハッシュ値が一致すれば
パスワードは元の文字列だということになるわけです。ちなみにこの攻撃方法をレインボークラックと言うとか。
現在のコンピュータパワーだと文字列の長さは10文字程度までとのことなので、
パスワードは12文字とか長くしておいたほうがいいですね。
ユーザーが必ずしも長いパスワードを入力するとも限らないですし、
できるだけ安全性を高めるために開発者側はパスワードにソルトというものを付けてからハッシュ化したほうがいいようです。
ソルトを付けなかったがためにパスワードが漏洩したサービスがあるとか。

ソルトとは何ですか? - QA@IT

ソルト(salt)とは、
パスワードのハッシュ値を計算する際に、パスワードの前後に付加する文字列のことです。
たとえば、ソルト長が10文字、パスワードが最短8文字とすると、ソルトつきパスワードは最短18文字になります。
このように長いパスワードに対応するレインボーテーブルを作ることは現在のコンピューターパワーでは不可能なので、
ソルトはレインボーテーブルに対する効果的な対策です。

とりあえずハッシュ化する文字列が長ければレインボークラック対策になるってことですね。
ソルトを付けてからハッシュ化するので割とどんな文字でも良さそうかな？

パスワードのソルトの要件は？ - QA@IT

じゃあソルトって何にしたらいいの？どう扱ったらいいの？って疑問に対しての回答。
とりあえずユーザー同士が同じパスワードを使っている場合には
各ユーザーのソルトが同じ場合は同じハッシュ値が得られることになってしまう。
すると同じハッシュ値のものはよく使われている単語によるパスワードだと推測できて
総当りによる攻撃がしやすくなるとのこと。ということでユーザーごとに異なるソルトを使いましょう。
ソルトの長さはパスワードと組み合わせてある程度の長さ(今のところ20文字程度？)があれば良いそうです。
今のところ10文字程度までの文字列しかレインボーテーブルにないので
パスワードにソルトを付けて十分の長さが得られれば良いということですね。
ソルトの文字列は別に乱数でなくても結局パスワードと組み合わせてハッシュ化するから関係ないかも。
でも乱数なら長さ的には申し分ないので乱数を使うのが多いそうです。
ハッシュ値とソルトは一緒にデータベースに保存するだろうけど漏れてしまえば
適当な文字列とソルトを結合してハッシュ化して試すだろうから
ソルトにそんなにこだわっても仕方ないかなという感じですね。
ユーザー毎に異なるソルトを十分な長さで使ってやればそれでいいみたいです。
無駄に長くするより何度もハッシュ化するストレッチングというのをする方が
解析する側の手間が増えて時間稼ぎになるらしいです。

これで十分？

ハッシュ化について結構書いたけど辞書式に総当り攻撃(ブルートフォースアタック)されたら
どれだけ安全なハッシュ化しようと関係ないんですよね…。
セキュリティはイタチごっこだから常に最新の情報を手に入れないと十分なんてことはないんだ！
だからセキュリティ関係の基礎知識を付けて最新情報を理解できるようにしよう！
2011年の記事だけど本当は怖いパスワードの話（1/4）－＠ITにちゃんと書かれてます。
やっぱりこの記事も体系的に学ぶ安全なWebアプリケーションの作り方の著者が書いてます。
著者の徳丸先生がBloggerやってるので読者になりました→徳丸浩の日記

こんな間違ってるかもしれない記事を書いたり読んだりしてないで著書を読めって話ですよね。すみません。
体系的に学ぶ安全なWebアプリケーションの作り方　脆弱性が生まれる原理と対策の実践

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

2012/06/08

[競技プログラミング][C言語][AtCoder][ふか杯]すべては1になる

B - すべては1になる

時間制限 : 2sec / スタック制限 : 8MB / メモリ制限 : 64MB

Description

O氏は長い間ずっと大学に閉じ込められていたが，
自分の後継となる者Fを見つけ後の事を全てそのFにたくし，n年の時を経て外の世界に旅立つことにした．(0は自然数)

大学から外の世界に出るためには，まず大学を卒業しなければならない．
なんと，O氏はこの事を事前に想定し，一定時間がたつと自動的に
O氏が卒業したことにするプログラムを大学のコンピュータに埋め込んでいたのだ．
しかし，仕込んだ日時は記録しているのだが
プログラムを仕込んだのがずいぶん昔なため卒業する正確な時刻を忘れてしまった．
仕込んだプログラムを見てみると，仕込んだ時刻から2進数で111....11秒後に発動する設定になっていた．

O氏は周りの人に不審に思われないように卒業するために，仕込んだプログラムが発動する時刻を計算することにした．

(この問題では，閏秒はないものとして考えること)

Input

入力は複数のテストケースからなる．入力の終わりは1つの0のみを含んだ行で示される．
各テストケースは以下の形式で与えられる．

year/month/day hh:mm:ss
time

1900≦year≦20012
01≦month≦12
01≦day≦31
00≦hh≦23
00≦mm,ss≦59
テストケースの1行目には，年，月，日，時間，分，秒が書かれている．
これらはO氏がプログラムを仕込んだ時刻を表している．
月，日，時間，分，秒は必ず2桁で与えられる．(値が10未満の場合，10の位は0埋めされる)

テストケースの2行目には，1のみから成る文字列timeが書かれている．
これはプログラムが発動するまでの時間を2進数で表したものである．timeの長さは1文字以上30文字以下である．

存在しない日付は与えられないことが保証されている．
テストケースの数は1つのファイルにつき5,000個以下であることが保証されている．

Output

各テストケースに対して，プログラムが発動する時刻を入力と同じ形式で1行に出力せよ．

出典

B: すべては1になる - ふか杯 5th Contest | AtCoder

回答

AtCoder/fuka5_2.cpp at master · wada811/AtCoder · GitHub

とりあえず全部秒に直して発動までの時間を足せばいいじゃないってことで
mktime関数で変換して計算した。
出力がサンプルインプット・アウトプットで間違っていたのになぜか通ったような気がする…。

2012/06/07

[競技プログラミング][C言語][AtCoder][ふか杯]単位

A - 単位

時間制限 : 2sec / スタック制限 : 8MB / メモリ制限 : 64MB

Description

今学期あなたは，k単位以上取得できなければ，留年してしまうことが分かった．
なんとしてもそれは避けたいので，n個の講義の中からいくつか選んで，k単位を取得したいと思う．

事前の調査によって，各講義で単位を取得するために最低限必要な出席回数が分かった．
学校などできるだけ行きたくないので，k単位以上取得するために必要な最小の出席回数を求めよう．

Input

入力は複数のテストケースからなる．入力の終わりは2つの0のみを含んだ行で示される．
各テストケースは以下の形式で与えられる．

n k
x1…xn

1≦n≦100
1≦k≦n
0≦xi≦100
テストケースの1行目には，2つの整数n, kが書かれている．nは講義の数を表し，kは必要な単位の数を表す．

テストケースの2行目には，n個の整数xiが書かれている．xiはi番目の授業の単位を修得するのに必要な出席回数を表す．

各講義で取得できる単位数は，すべて1単位である．
テストケースの数は1つのファイルにつき1,000個以下であることが保証されている．

Output

各テストケースに対して，最低限出席しなければならない回数を1行で出力せよ．

出典

A: 単位 - ふか杯 5th Contest | AtCoder

回答

AtCoder/fuka5_1.cpp at master · wada811/AtCoder · GitHub

ソートして k まで合計すれば必要最小限の出席回数になる。

2012/06/06

[Excel][VBA]自分自身(エクセルファイル)を削除するマクロ

[Excel][VBA]エクセルファイルからマクロを除去する | DevAchieveでは
マクロありファイルとマクロなしファイルの2種類ができてしまうので
マクロありファイルの方を削除してしまいたいという希望もあるはず。
そんな時にはこの自分自身を削除するマクロが役に立ちます。
そんなメタ操作できるのか！って感じですができちゃうんですね。凄い。

With ThisWorkbook 
    .Save 
    .ChangeFileAccess Mode:=xlReadOnly 
    Kill .FullName 
    .Close(False) 
End With

できる逆引き Excel VBAを極める勝ちワザ700
2010/2007/2003/2002対応 (「できる逆引き」シリーズ)

2012/06/05

[Excel][VBA]エクセルファイルからマクロを除去する

エクセル初回起動時にデータを読み込んでマクロで動的に表示を作成した後は
マクロをもう使わないので削除したいって時のための方法です。
マクロが残っていると起動時にセキュリティの警告が出たり、
利用者にマクロを見られるという問題を回避したい場合に使えます。

コピーとかでシートを移すとすべて移した段階で
何故かマクロも移るという現象が起こるので一枚シートを残してやる必要があります。

Sub CreateNoMacroBook()
    Dim fname As String
    Dim ns As Integer
    Dim cnt As Integer
    
    'マクロありブックの名前を取得
    fname = ActiveWorkbook.Name
    'マクロありブックのシート数を取得
    cnt = ActiveWorkbook.Worksheets.Count
    
    'すべてのシートをMoveするとエラーになるのでシートを追加
    Worksheets.Add After:=Worksheets(Worksheets.Count)
    '新規ブック作成時のデフォルトのシート数を保管
    ns = Application.SheetsInNewWorkbook
    '新規ブック作成時のシート数を変更
    Application.SheetsInNewWorkbook = 1
    '新規ブック作成
    Workbooks.Add
    '新規ブック作成時のデフォルトのシート数に戻す
    Application.SheetsInNewWorkbook = ns
    
    'マクロありブックのシートを新規ブックの"Sheet1"シートの前に移動
    For i = 1 To cnt
        Workbooks(fname).Worksheets(1).Move Before:=Workbooks(Workbooks.Count).Worksheets("Sheet1")
    Next i
    '表示用に新規ブックの一枚目のシートをアクティブにする
    Workbooks(Workbooks.Count).Worksheets(1).Activate
    
    Application.DisplayAlerts = False
    '新規ブックのデフォルトシート"Sheet1"を削除する
    Workbooks(Workbooks.Count).Worksheets("Sheet1").Delete
    'マクロありブックを保存せずに終了
    Workbooks(fname).Close SaveChanges:=False
    Application.DisplayAlerts = True
    
End Sub

できる逆引き Excel VBAを極める勝ちワザ700
2010/2007/2003/2002対応 (「できる逆引き」シリーズ)

2012/06/04

[競技プログラミング][GREE Programming Challenge]カードのシャッフル

GREE Programming Challenge
概要
・グリーのエンジニアに応募してみたいが、応募前に自分の実力を試してみたい。
・地方に住んでいるので面接回数が少ない方がありがたい。
・面接は苦手だがプログラミングには自信がある。
GREE Programming Challengeは、このような方々のご要望にお応えするために作られた新しい採用プログラムです。
プログラミングスキルを評価する１次面接をパスできますので効率的な転職活動を行って頂けます。
もちろん学生の皆さんのチャレンジもお待ちしております。

チャレンジ方法
制限時間内に与えられた問題を解決するプログラムを書いてください。
一定の基準をクリアした方については、弊社人事担当から面接のご連絡をさせて頂きます。
※ただし、あなたの書いたコードが他人のコードに酷似していた場合、
あなただけでなく、酷似していた方についても失格とさせて頂きますので、問題の管理は厳重にお願いします。

もう採用は終了しているみたいなので記事書く。

カードのシャッフル（配点：30点）

N枚のカードをシャッフルするアルゴリズムを以下のように定義する。

1) カードをまずK個の山に均等に分ける。
2) 一つ目の山には、元のカードの最下部にあった「N/K枚」を順番を変えずにそのまま使う。
3) 二つ目の山には、元のカードの最下部から2番目にあたる「N/K枚」の塊を順番を変えずに使う。以下同様。
4) これでK個の山が出来たので、次にシャッフルに移る。
まず一つ目の山の一番上にあるカードを取って、シャッフル結果の山の1枚目のカードとなるようにする。
さらに二つ目の山の一番上にあるカードを取って、シャッフル結果の山の2枚目のカードとなるようにする。
全ての山の一番上のカードを使った後は一つ目の山に戻り、
一つ目の山で現在一番上になっているカードを取ってシャッフル結果の山の(K+1)枚目のカードとする。
次に、二つ目の山で現在1枚目になっているカードを取ってシャッフル結果の山の(K+2)枚目のカードする。以下同様。

例えば、N=6 で K=3 だった場合、元のカードの順番が上から下に「ABCDEF」となっていたとすると、
上記アルゴリズムを1回実行した結果は「ECAFDB」となる。

入力されたNとKの値を元にシャッフルを何度も繰り返した時に、
カードの順番が元のカードの順番と再び同じになるために必要な最低限のシャッフル回数を求め、
色々なNとKの値の組み合わせを連続してテストできるようにしたプログラムを書け。

入力値は以下のようにプログラムに入力されるものとする：
・1行目には、行われるテストの数Tが入力される。
・次に続くT行には、NとKの二つの整数が入力される。

出力結果

・T行の結果が出力される。各行には、各テストにおいて元の順番に戻るまでに必要な最小シャッフル回数が表示される。
もし元の順番に戻ることが決して無い場合は、-1が出力される。

条件

・Kは常にNの約数
・T <= 10000 ・2 <= K <= N <= 10^9

出典

GREE Programming Challenge / カードのシャッフル | Interview Street Challenges

考え方

Case: n = 6, k = 3
index:  0 1 2 3 4 5
cards:  A B/C D/E F
shuffle
result: E C A/F D B
index:  4 2 0/5 3 1

ここで、n / k == 2, n - n / k == 4 なので、
for(i = 0; i < n / k; i++)
for(j = n - n / k; j >= 0; j -= n / k)
でシャッフルできる。

解答

/* Enter your code here. Read input from STDIN. Print output to STDOUT */
#include <stdio.h>
#define MAX 100000000

int cards[MAX], temp[MAX];
int count;

int check(int n){
    int i;
    for(i = 0; i < n; i++){
        if(cards[i] != i){
            return 1;
        }
    }
    return 0;
}

void shuffle(int n, int k){
    int i, j, l;
    i = 0;
    for(j = 0; j < n / k; j++){
        for(l = n - n / k; l >= 0; l -= n / k){
            temp[i++] = cards[j + l];
        }
    }
    for(i = 0; i < n;  i++){
        cards[i] = temp[i];
    }
    
    if(check(n)){
        count++;
        shuffle(n, k);
    }
}

int main(){
    int num;
    int n, k;
    int i, j;
    
    scanf("%d", &num);
    for(i = 0; i < num; i++){
        scanf("%d %d", &n, &k);
        for(j = 0; j < n; j++){
            cards[j] = j;
        }
        count = 1;
        shuffle(n, k);
        printf("%d\n", count);
    }

    return 0;
}

なんか面白そうなことやっているのでチャレンジしてみた。
文章が長くてパッと見なにやるのか把握するのに時間がかかったけど
簡単にいえば山を分割して後ろの山から順に先頭のカードを取るだけ。
シャッフルのアルゴリズムに少し悩んだけど(n, k) = (6, 3), (6, 2)を考えたら法則が見えた。
カードの中身が何であるかは問われていないので適当に数字入れてチェックもそれで。
あとはシャッフル関数を再帰呼び出ししてカウントすればOK。
しかしもう採用が終わったからなのかわからないけど投稿してもアウトプットに出力されない。
せっかくやったのになー。

早くまともにPHPで標準入出力できないと毎回C言語で書かなきゃならんので覚えよう…！

2012/06/03

[書評]「プロになるためのWeb技術入門」
なぜ，あなたはWebシステムを開発できないのか

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか
 小森裕介
技術評論社
発売日：2010-04-10

ブクログでレビューを見る»
Webシステムを開発する上で必要な基礎知識を
Webアプリケーションの発展の歴史とともに学ぶことができる良書です。
なんとなくプログラミングできて、なんとなくフレームワークやデータベースを扱えて、
そんなプログラマがWebシステムを理解することができます。
Web系の企業でちゃんとしたエンジニアになりたいなら読んでおくべき一冊だと思います。

書籍案内：『プロになるためのWeb技術入門』―なぜ，あなたはWebシステムを開発できないのか｜gihyo.jp 技術評論社
『プロになるためのWeb技術入門』サポートサイト

AndroidとかiOSとかでアプリばっかり作ってるからか、
Webシステムを作るための基礎知識が全然ありませんでした。
言葉は聞いたことあるけど理解していない、
実装する際に何がスタンダードなやり方なのか知らないという状況で、
コレはまずい！と思って急いで買ってきて読みました。

Web系の企業でWebシステムを開発するエンジニアは
この本に書いてある内容を理解していないとヤバいですね。
それくらいWebシステム開発の基礎知識が詰まっています。

半日くらいぶっ通しで読めば読み終わるくらいには読みやすいので
基礎知識に不安がある人は買ってきて土日で読むといいです。
読んだ翌週にはきっと生まれ変わったような感覚になれます。というかなりました。

目次を見ると古い技術から解説してあって今更そんな事知って何になるんだ、と思うかもしれませんが
Web技術の発展の過程で何が問題になってどのように解決していったのか、
どのように現在の高度化した技術が生まれたのかがわかるので
現在の技術、これからの技術を理解するのに役立ちます。

またWebシステムで必須のセキュリティ対策についてもわかりやすく書いてあり、
いきなり徳丸本を読むのはハードルが高いなぁって人にもオススメです。
他にも、戻るボタン問題やダブルサブミット問題についても書かれているので
困っている人には今すぐ役立つ内容になっています。

Web系企業ならこの本を研修とかで読ませればいいのに、と思いました。

2012/06/02

[書評]知る、読む、使う！オープンソースライセンス

知る、読む、使う！オープンソースライセンス - 達人出版会
著者:可知豊
バージョン:1.0.0

今回は紙の本じゃなくて達人出版会という出版サービスから出版された電子書籍です。

達人出版会
最新の技術をいち早く日本語で読みたい。気になる技術をまとめて知りたい。
本になるまで待てないし、ネットの検索はノイズが多すぎる。
──そんな悩みを抱えたITエンジニア、ITユーザの願いを叶えるために、このサービスは誕生しました。
達人出版会は、主としてIT系の技術書籍をPDF・EPUBの電子書籍としてお届けする、
技術志向の方々のための出版サービスです。

今までだったらあんまり電子書籍とか手を出さなかったのですが、
今回の本のサンプルに見覚えのある果物の樹を育てたり看板を立てる話がありました。
昔、図書館で丸っきし同じ内容の本を読んだことがあり、疑問に思ってTwitterにつぶやいたら
「知る、読む、使う！オープンソースライセンス」の著者さんに実はその本も私が書きました、とのこと。
以前読んだ本もわかりやすかったし、以前とは違ってプログラミングをやるようになって
オープンソースのライブラリを使うことも増えてきたのでちょうどいい機会だと思って購入してみました。

本の内容はオープンソースライセンスについてガッツリ説明したものになっています。
第7章のオープンソースライセンスカタログは各種ライセンスの説明が載っているので役立つでしょう。
関連して伽藍とバザールを読むと楽しいかもしれないです。

せっかく読んだのでこのブログにも権利表示を載せてみました。
ブログの記事(テキスト・画像)についてはクリエイティブ・コモンズ3.0(表示-非利益-改変禁止)ってことで、
まぁ引用するならリンクしてね、勝手に売り物に載せたらだめだよ、改変はもちろん禁止という当たり前のもの。
ソースコードを載せることが多いですが、ソースコードはMITライセンス(表示-無保証)です。
表示は基本的にリンクしてねってくらい、プロダクトに組み込むのは割とどうでもいいって感じです。
自分ルールで独自ライセンスみたいになると良くないらしいので面倒ならライセンスの方が優先です。

2012/06/01

target="_blank"を設定したらリンクテキストのあとにアイコンを表示する

先日リンクにファビコンを表示する記事が話題になっていたことからヒントを得た。
これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのWEB屋
このようにリンクテキストのあとに新しいタブで開くことをアイコンで表示することができる。

知っている人には何を今更って内容なのだろうけど今までずっと謎だったので解説記事書く。

<a href="http://wada811.blogspot.com/" target="_blank">DevAchieve</a>

.entry-content a[target]:after {
    margin: 0 2px;
    content: url(http://表示したい画像のURL);
}

.entry-content はBloggerの記事内部を表すクラス。記事の外のスタイルは変更したくなかったので。
a[target] はaタグを属性セレクタでtarget属性を持つもののみを指定。
:after は疑似要素。要素の後のスタイルを指定できる。
content で表示内容を指定。画像で表示したいのでBloggerでアップロードしてURLを指定した。

インスピレーションを得たFavicons Next To External Links | CSS-Tricksでは
a[href^="http"]:before で、 [href^="http"]で前方一致していた。
同様にして[target="_blank"]でできそうなんだけどスタイルが適用されなかった。
仕方ないので target の記述があるかどうかだけチェックしてます。
普通は target="_blank"を指定するときだけ target 属性を書くと思うので。

参考リンク

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
:after疑似要素 (E:after)｜セレクタ｜CSS HappyLife ZERO

BloggerのモバイルページをGoogle検索に表示させない方法

モバイルページをPCで開くとモバイル表示のままでPC版にリダイレクトされないし、
ソーシャルなリアクションがモバイル版のURLで行われてしまうので
Google検索でモバイルページを表示させないようにしたほうがいいかもしれないです。
スマホとかでPC版にアクセスしてもモバイル版にリダイレクトされるから
モバイルページを検索に載せておく必要性はないしね。

ということでGoogle検索にモバイルページを載せないように設定しましょう。
参考：BloggerのモバイルページをGoogleにインデックスさせない方法 +Plus One World
方法としてはウェブマスターツールの設定＞URLパラメータの項目で、
パラメータを追加ボタンからモバイル用のパラメータ「m」を追加してクロールしないにチェックを入れて保存します。
これだけ！これでGoogle検索にモバイルページが表示されなくなります。

ページ

ご購入検討中の方へ

そのほか、下記のような方々にもおすすめです。

解説

追記(2012/06/28 7:27)

追記(2012/06/30):<meta name="format-detection" content="telephone=no">について

回答

追記(2012/09/01):DateTime::createFromFormatの方が簡潔だった

回答

B - 2点間距離の最大と最小 ( Maximum and Minimum )

問題文

入力

出力

出典

回答

A - 2点間距離の最大値 ( The longest distance )

問題文

入力

出力

出典

回答

回答

回答

B - さかさま辞書

問題文

入力

出力

出典

回答

A - GPA計算

問題文

入力

出力

出典

回答

C - 流れ

Description

Input

Output

出典

回答

iPhoneプログラミングUIKit詳解リファレンス - 目次

Chapter00 本書を読む前に

Chapter01 Hello, UIKit !

Chapter02 UIView 徹底解説

Chapter03 UIViewControllerと画面遷移

Chapter04 フルスクリーンと画面の回転

Chapter05 グラフィックス＆アニメーション

Chapter06 タッチ操作＆モーション

Chapter07 ユーザへの通知と意思確認

Chapter08 テキストとWeb の表示

Chapter09 テーブル表示

Chapter10 UI部品の利用

Chapter11 アプリケーション＆デバイス情報

Chapter12 カメラ撮影＆ムービー編集

利用者側

開発者側

パスワードってどうやって保存すればいいの？

これで十分？

B - すべては1になる

Description

Input

Output

出典

回答

A - 単位

Description

Input

Output

出典

回答

概要

チャレンジ方法

カードのシャッフル（配点：30点）

出力結果

条件

出典

考え方

解答

参考リンク

Chapter00　本書を読む前に

Chapter01　Hello, UIKit !

Chapter02　UIView 徹底解説

Chapter03　UIViewControllerと画面遷移

Chapter04　フルスクリーンと画面の回転

Chapter05　グラフィックス＆アニメーション

Chapter06　タッチ操作＆モーション

Chapter07　ユーザへの通知と意思確認

Chapter08　テキストとWeb の表示

Chapter09　テーブル表示

Chapter10　UI部品の利用

Chapter11　アプリケーション＆デバイス情報

Chapter12　カメラ撮影＆ムービー編集

ブログアーカイブ