2014-01-11

iOS7の通知センターの削除ボタンをjsで書いてみる

JavaScript CSS

友人に実装の仕方を尋ねられたので，iOS7の通知センターの削除ボタンをjsで実装してみた（下記のgif画像みたいなぼたんのことです）．

f:id:mayo_yamasaki:20140111170926g:plain

下記に必要最低限のhtml, css, javascriptを示します．
（jQueryが必要です．）

html

<div class="toggle-btn clearfix">
    <div class="front">＋</div>
    <div class="back">消去</div>
</div>

css

.clearfix {
    min-height: 1px;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

.toggle-btn {
    float :right;
    background-color: #666;
    color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
}

.toggle-btn > div {
    float: left;
}

.toggle-btn > .front {
    width: 20px;
}

.toggle-btn > .back {
    display: none;
    width: 40px;
}

$(".toggle-btn > .front").on("click",function(){
    var $tgBtn = $(this).parent();
    var $back = $tgBtn.find('.back');
    var that = this;

    $tgBtn.animate({
        'width': $back.width(),
    }, 300);

    $(this).animate({zIndex:1},{
        duration: 300,
        step:function(z){
            $(this).css({transform:'rotate(' + (z * -45) + 'deg)'});
        },
        complete:function(){
            $(that).css('zIndex', 0)
            .fadeOut(300, function(){
                $back.fadeIn(300);
            });
        }
    });
    ;
});

簡易な実装なので，微妙に挙動が違いますが，参考程度に．

2014-01-06

【書評】Think Simple―アップルを生みだす熱狂的哲学

書評

2012年5月出版のケン・シーガル著「Think Simple―アップルを生みだす熱狂的哲学」を読んだ．何故2014年1月に突然読む気になったのかと言うと，Wantedly CEOの仲暁子さんの下記の投稿に影響されたからです．
スタートアップをするときの必読書4まとめ

この記事には４冊の書籍が勧められていてます．

恥ずかしながら，このなかで「Think Simple―アップルを生みだす熱狂的哲学」だけ全く聞いたことがなかったので，早速ぽちって読んでみました．

概要

本書は，スティーブ・ジョブズ，ひいては Apple社の哲学である”Think Simple”について，12年間ともに働いたクリエイティブ・ディレクターのケン・シーガルが書いたもの．

内容としては，下記の１０個の哲学について章を割き，個々の哲学を裏付ける物語を述べているといったもの．
読み物としても非常に面白く，中だるみせず，最後まで読むことができました．

Think Brutal 容赦なく伝える
Think Small 少人数で取り組む
Think Minimal ミニマルに徹する
Think Motion 動かし続ける
Think Iconic イメージを利用する
Think Phrasal フレーズを決める
Think Casual カジュアルに話し合う
Think Human 人間を中心にする
Think Skeptic 不可能を疑う
Think War 戦いを挑む

最後の Conclusion に要点がまとまっています．それをさらに要約した記事がありましたので，そちらを参照して頂ければ概要は攫めると思います．
「Think Simple」—Appleが誇る「シンプル哲学」10の要素

ケン・シーガル自身が，マーケティング部門で働いていたこともあり，プロモーション動画・ポスター等について数多くふれているのですが，本書には画像等の視覚的情報がなかったので，Youtube 等で調べながら読み進めると良いと思います．

充分ではない時間

印象に残った部分ですが，今回は結構少なかったです（恐らくすでに１０個哲学としてまとめられていたからだと思います）．
p110 の Think Motion．プロジェクトのスケジューリングに関して，指揮者のレナード・バーンスタインの考えを引用しています．

偉大なことをなし遂げるには、ふたつのことが必要だ。計画と充分ではない時間だ。

というのも，充分すぎる時間は，プロジェクトをめちゃくちゃにする最も簡単方法であるからです．なぜなら，時間が充分にあると，人々は見直しをしたり，手を加えたり，再考したり，新たにメンバーを入れたり，いそから意見を求めたり，テストを実施したりするから．

本書で言及されていた動画のまとめ

重たかったので，埋め込みは一つだけ．後はリンクです．

Apple (unreleased) Think Different ad - Narrated by Steve Jobs (1997)

Complete 66 Mac vs PC ads + Mac & PC WWDC Intro + Siri Intro

Apple COMPLETE iPod "Silhouette" ad campaign compilation (2004-2008)

iPhone Keynote 2007 Complete

Steve Jobs' 2005 Stanford Commencement Address

Arduino 入門

Arduino

Physical Computing Lab の「Arduinoエントリーキット」をポチったので，試してみる．

【内容】

Arduino UNO Rev3
USBケーブル　A/Bタイプ（30cm)
ブレッドボード
タクトスイッチ
LED（赤色ｘ4、黄色ｘ1、黄緑ｘ1、青色x1)
フルカラーLED(アノードコモン）ｘ1
抵抗器（10kΩｘ5、1kΩx5、510Ωｘ10、330Ωx5、）
可変抵抗10kΩx1
ジャンパーワイヤー（14cmｘ15、18cmｘ5, ３cmx5）
圧電スピーカー（PT08-Z185）
光センサー（Cdsセル）
温度センサー（LM35DZ）

現状の知識

Arduinoに関する現在の知識は，前回のブログ「メイカーことはじめ」で紹介した下記の書籍「Arduinoをはじめよう」を読んだ程度です．

Arduino入門

”Arduino 入門”でGoogleすると，ドットインストールのレッスンがヒット．ドットインストールで電子工作も学べるとは知りませんでした．早速，視聴しました．
Arduino入門 (全12回) - プログラミングならドットインストール

#03 主な部品をみていこうで，本レッスンで使用する部品について紹介しています．次のような素子が使用されています．

ブレッドボード
ジャンプワイヤ
LED
抵抗
タクトスイッチ
CdSセル
圧電スピーカー

これらの素子は「Arduinoエントリーキット」で全て揃うので，本レッスンは入門教材として良さそうです．
ちなみに，もうひつと人気のあった「Arduinoをはじめようキット」では，Amazonのレビューにもありますが圧電スピーカー等が付属していないので，注意が必要です．

ドットインストールのレッスンについて

#05 "Lチカ"してみようで紹介されているLチカから始まり，基本的な回路と，それを制御するためのプログラムが紹介されています．（Lチカは，ソフトウェアで言うHello World的な位置づけらしいです．）

内容としては，「Arduinoをはじめようで」紹介されていた回路とコードとほぼ同じで，物足りない印象．
基礎的な学習のため内容が類似しているのだと思います．たぶん。

途中で510Ωの抵抗を使うのですが，抵抗の読み方を忘れてしまったので，変換ツールを検索してると良さそうなものを発見．カラーコードから抵抗値に，抵抗値からカラーコードに変換してくれるWebツールのようです．
抵抗 - カラーコード（4本・5本色帯）変換 - 計算ツール

おわりに

こんな感じで，Arduino のはじめの第一歩を踏み出しました．
次は何をやってみようかなー．

2013-12-31

メイカーことはじめ

Arduino 書評

DIYの精神に影響を受け，ハードウェアを作りたくなったので，はじめようと思う．
さて，何からはじめればいいか全く分からなかったので，"メイカームーブメント”の火付け役になったクリス・アンダーソンの”MAKERS―21世紀の産業革命が始まる”から読み始めてみた．本書の感想は別記事を参照されたい．

本書を読んで，大まかなトレンドを把握できた．
僕自身は，エレクトロニクスに興味があったので，その方向を調べてみることにする．

ハードウェアの構成要素

まずは，ハードウェアを小分けにして理解する．古代ローマの言葉を借りるなら divide et impera つまり，分割して統治する．
どういった要素で構成されているのかを調べてみると，Upverterが発表した枠組みが見つかった．
下図に，その枠組みである Hardware Product Canvas を示す．

f:id:mayo_yamasaki:20131231203746p:plain

つまり，次の５つによって，ハードウェアは構成されている．

センサー
ストレージ
通信装置
ユーザインタフェース
プロセッサ

Social News Designe の記事初期段階のハードウェア設計を１枚の用紙でまとめる「ハードウェアプロダクトキャンバス」に，いくつかの具体例が示されていたので，イメージが湧かない場合を参照されたい．

プロセッサ

構成要素で中心になるのはプロセッサだと思う．最近だと，Arduino(アルドゥイーノ)，Raspberry Pi(ラズベリーパイ)，BeagleBone(ビーグルボーン) 等があります．
ですが，違いが分からないと選ぶことが難しいので，比較してみる．

と思ったのです，Googleすれば比較した記事が大量に出てきたので，参考にしました．

Arduino，Raspberry Pi，BeagleBone 比較記事

使い分けを簡単に言うと，プロジェクトの規模や複雑さに比例して，Arduino，Raspberry Pi，BeagleBone の順に大きく複雑なものを対象にしています．
各記事に，実際の製作物が例示されていたので，動画等を見てみるとイメージが湧くと思います．

Arduino

とりあえず僕は，入門として良いらしい最も小さい Arduino から始めてみます．
Googleしてみると，二冊程良さそうな本がありました．

Arduinoをはじめよう第2版 (Make:PROJECTS)

たのしい電子工作 Arduinoで電子工作をはじめよう!

本屋でぱらぱらと見てみると，" Arduinoをはじめよう第2版"のが簡単そうだったので，こっちを購入(定評のあるオライリージャパン出版だったこともあり)．

簡単に書評を書くと，手書きの回路図に基礎的な回路をブレッドボード等を使って紹介しています．C ライクなArduinoのソースコードと詳細な解説がついていて，すらすら読み進めれます．また，書籍の半分程がArduino言語のリファレンスになっています．

Next Step

" Arduinoをはじめよう第2版"で，雰囲気を攫めたので，実際に触ってみることにする．
Physical Computing Lab の Arduinoエントリーキットが良さそう．

"2014年中に"というと長いので，2014年４月までに面白い製品をひとつ作る．

<a href="http://mayo.hatenablog.com/entry/2013/12/29/034547">【書評】MAKERS―21世紀の産業革命が始まる - 巨人の肩の上に登る</a> <a href="http://mayo.hatenablog.com/entry/2014/01/06/084217">【書評】Think Simple―アップルを生みだす熱狂的哲学 - 巨人の肩の上に登る</a>

2013-12-29

【書評】MAKERS―21世紀の産業革命が始まる

書評

クリス・アンダーソン著の”MAKERS―21世紀の産業革命が始まる”を読んだので，印象に残った所をメモ．
感想としては，前作のFREEに比べて，大きな刺激を受けませんでした．2012年10月出版ということもあり，一年前なので，2013年12月現在だと知っている情報が多かったためだと思います．全体としは非常に面白く，モノ作りに対するモチベーションのアップになりました．

本書は，3Dプリンタをはじめとした技術革新によって，ソフトウェアのように個人がハードウェアを容易に製造し起業できるようになることを示唆している．これは，ビット(情報)の世界で起こっていることが，我々が生きているアトム(原子)の世界でも起こることを意味している．そしてアトム(原子)の経済規模はビット(情報)の比ではない．ビット(情報)の無重力経済は第三次産業革命とも言われ話題になっているが，アメリカのGDPで考えると５分の１にすぎない．

本書に関する全体的なレビューは他のサイトでも数多く見れ，すでに身近な製品やサービスにも出て来ている．そこで本稿では，僕が特に印象に残ったとこだけ抜粋する．

世界でもっとも強力なアイデア

p48-49に，1700年代イギリスでの特許関連の法律・政策に触れています．特許は，職人たちに発明を促すだけでなく，発明をシェアするインセンティブとなったとあり，「世界でもっとも強力なアイデア（The Most Powerful Idea in the World）」[William Rosen 2010]を引用しています．それ自体は良いのですが，世界でもっとも強力なアイデアってなんだ？っと思い，少し調べてみました．

まず，The Most Powerful Idea in the World は洋書しかなく，Microsoft創業者ビル・ゲイツ氏が自身のブログに投稿した The Best Books I Read in 2013にも上げられていました．(参考ビル・ゲイツが選ぶ「今年読んで良かった7冊」は必読だと思う@narumi)
次に，世界で最も強力なアイデアとは，"蒸気機関”であると述べています．というのも，蒸気機関を活用するために数多くの技術革新が必要だったからです．例として，正確な測定に基づくフィードバックのためのマイクロメーター等があります．
The Most Powerful Idea in the World の著者Rosen氏曰く，正確な測定によるフィードバックがなければ、発明は”稀有で不安定であることを運命づけられている”．フィードバックがあれば、発明は”特別なことではなくなる”．

The Most Powerful Idea in the World に関連する記事

WSJ 世界の問題を解決するために必要なもの＝ビル・ゲイツ
 ビル·ゲイツからの 2013 年度年次書簡

イケア効果

p91-92 あの家具のイケアです．
イケア効果とは，次のようなものです．

人は自分で手間をかけることがクオリティーの向上に繫がると信じる

本書に例として，行動経済学者のダン・アリエリーの引用を乗せており，不合理で面白かったです．

アメリカの専業主婦の家事負担を軽減し，生活を簡単便利にしようという国民的なトレンドに乗って，１９５０年代にインスタントケーキミックスが発売された当初は，拒否反応が起きた．ケーキミックスはお手軽すぎて，主婦の労働や技術が過小評価されると感じた人がいたからだ．その後，食品会社は，レシピを変え，ミックスに卵を加えるようにした．この変更だけが商品の大ヒットにつながったわけではないにしろ，手作業を加えることが成功のカギになったと思われる．

余談ですが，ダン・アリエリーの書籍やプレゼンテーションは非常に面白いです．

ダン・アリエリーに関する書籍・動画

予想どおりに不合理―行動経済学が明かす「あなたがそれを選ぶわけ」

我々は本当に自分で決めているのか？

既存の製品の改革を考える枠組み

p40 改革用ツールキット

もしその製品がインターネットにつながると，なにがどう良くなりますか？
もしデザインがだれにでも改変できるとすれば，どう改善されるでしょう？
特許使用料がなければ，値段はどのくらい下がりますか？

本書では，スプリンクラーの例が示されています．

国富論

p89 メイカーは，どんな専門品も作る人でも原材料のグローバルなサプライチェーンを利用し，完成したニッチ商品を世界中の消費者に届けることが可能になった．
これがある意味で，アダム・スミスが「国富論」で唱えた，効率的な市場を支える専門家の行き着く姿であるといえる．つまり，効率的な分業こそが社会全体の生産性が上げる．これは１８世紀に上手く言ったが，２１世紀ではもっと効果的になる．
アダム・スミスの国富論は中々読む機会がなく，読めていないので，是非読んでみたい．

この世に物語は７つしかない

p96 非常に共感できた一節．

僕らはリミックス文化の中で生きている．あらゆるものは過去のなにかにヒントを得て生まれ，創造性は独創的な作品の中にだけではなく，既存の作品の新たな解釈の中にも発揮される．

本書では例として，つぎの様な話をしている．　　

ギリシャ人は，物語の原型は７つしかなく，あらゆる物語はそのいずれかの細部を変えたものにすぎない

面白いなあと思ったのですが，Googleしてみても関連する情報を得ることができず．
また調べてみます．

因みに僕のブログのタイトルは，12世紀のフランスの学者シャルトルのベルナールの言葉，"巨人の肩の上に立つ"をもじったものです．意味としては，現代の学問は多くの研究の蓄積の上に成り立っているということです．

イノベーションを維持する方法

p210 ピサノとシーはハーバード・ビジネス・レビューに発表したアメリカの競争力に関する論文で，イノベーションを維持する方法に触れています．

集合的な研究開発
エンジニアリング
製造能力といった「産業の共有資源(インダストリアル・コモンズ)」の積み上げ

ピサノとシーは，完成品を作るだけでなく，発明し，完成品に組み込む部品を作り，それらすべてを行える世代を訓練すべきであると述べています．

<a href="http://mayo.hatenablog.com/entry/2013/12/31/212636">メイカーことはじめ - 巨人の肩の上に登る</a> <a href="http://mayo.hatenablog.com/entry/2014/03/13/143435">【書評】小さなチーム、大きな仕事-37シグナルズ成功の法則 - 巨人の肩の上に登る</a> <a href="http://mayo.hatenablog.com/entry/2014/01/06/084217">【書評】Think Simple―アップルを生みだす熱狂的哲学 - 巨人の肩の上に登る</a> <a href="http://mayo.hatenablog.com/entry/2014/03/02/071317">リーンキャンバスのWebツールを作ってみた - 巨人の肩の上に登る</a>

2013-12-22

Scala でロジスティック回帰

機械学習 Scala Algorithm

サイボウズ・ラボの @shuyo さんの連載でロジスティック回帰を Python で実装されていたので，Scalaでも実装してみた．第18回　ロジスティック回帰

ロジスティック回帰とは

ロジスティック回帰は，基本的にはパーセプトロンと同様に分類器です．パーセプトロンでは正負で分類するだけで，その値に関わらず(0.000001でも100000同様に扱う)分類します．従って，その分類の”信頼度”，つまり，どのくらい正しいのかを得ることができません．そこで，分類モデルを確率化することで"信頼度"を定義したのが，ロジスティック回帰です．詳細な解説は元記事参照．

ロジスティック回帰の実装

Scalaの実装を Github にアップしてます．以下に簡単な解説．

main.scala

 def main(args: Array[String]) {
        val gold:List[(Double, Double, Double)] = this.makeTestData(100)
        val logisticregression = new LogisticRegression
        val w:List[Double] = logisticregression.train(gold)
}

sampleでは，二次元データの分類を想定．
教師データを，下記のフォーマットで無作為に100個生成しています．

(x軸座標, y軸座標, 正解:1.0 or 不正解0.0)

wが学習された重みのListになります．つまり，分離平面は次のように表せます．

w(0) * x + w(1) * y + w(2)

LogisticRegression.scala

学習全体

def train(gold:List[(Double, Double, Double)], w:List[Double] = List[Double](0.0, 0.0, 0.0), eta:Double = 0.1 ,limit:Int = 50): List[Double] = {
    val r = new Random
    val new_w:List[Double] = this.trial(r.shuffle(gold), w, eta)

    if (w == new_w || limit <= 0) {
        return new_w
    } else {
        train(gold, new_w, eta*0.9, limit-1)
    }
}

trainは，引数として，訓練データのList, 重みベクトルの初期値，学習率eta，イテレーション回数を取ります．
学習の終了条件は，limit回に達したとき，または，更新が無くなったときとしています．
本来は w の差分を判定にした方が良いです．
また，イテレーションごとに学習率を0.9倍し，再帰呼び出ししています．

各イテレーション

private def trial(gold:List[(Double, Double, Double)], w:List[Double], eta:Double): List[Double] = {
    var new_w:List[Double] = w

    gold.foreach { p =>

        val feature: List[Double] = this.phi(p._1, p._2)
        val predict: Double = this.predicate(new_w, feature)

        new_w = new_w.zip(feature).map((t) =>
            // aw - eta + (predict - aglod._3) * aphi
            t._1 - eta * (predict - p._3) * t._2
         )

    }

    new_w
}

trial は，引数として，訓練データのList, 重みベクトルの初期値，学習率etaを取ります．
ここでは，個々の訓練データに対して、featureとpredictを求め，重みwを更新しています．

最後に各関数群

private def predicate(w: List[Double], phi: List[Double]):Double = {
    this.sigmoid(this.innerProduct(w, phi))
}

private def innerProduct(a: List[Double], b: List[Double]): Double = {
    if (a.size != b.size) {
        throw new RuntimeException("list size isn't equal.")
    }

    val products:List[Double] = a.zip(b).map((t) => t._1 * t._2)
    products.reduceLeft {(a,b) => a + b}
}

private def phi(x:Double, y:Double):List[Double] = {
    List[Double](x * 1.0, y * 1.0, 1.0)
}

private def sigmoid(z:Double): Double = {
    1.0 / (1.0 + Math.exp(-z))
}

上から順に，wとphiの内積，内積，phi, sigmoidを求める関数です．

出力例

f:id:mayo_yamasaki:20131222153417p:plain

2013-12-17

アカリクアプリコンテストで，サイバーエージェント特別賞を受賞

Diary

f:id:mayo_yamasaki:20131217103229j:plain

12月14日に開催されたアカリクアプリコンテストのファイナルプレゼンに出場してきました．
会場はGMOインターネット株式会社で，始めてお邪魔したのですが，真っ白で清潔感溢れる印象．

本大会に参加されたのは50作品程で，6組がファイナリストとして採択されました．
発表作品は下記の6作品です．非常に完成度の高い作品もあり，驚きました．

審査は，事前に提出した書類と当日のプレゼンテーションで決定．
審査結果は次の通りです．

優勝 Cloud Latex : 賞金50万円
サイバーエージェント特別賞 Grasphy : iPad Air (3台)
二位 Code Combat : 賞金10万円
アカリク特別賞 SSlide : Amazonギフト券3万円

僕たちが開発した Grasphy が，先日行われたMA9でのStudent賞に続いて，アカリクアプリコンテストでサイバーエージェント特別賞を頂きました！！ありがとうございます．

僕たちが目指すGrasphyはまだまだ先にあります．
今後とも宜しくお願い致します．

grasphy

<a href="http://mayo.hatenablog.com/entry/2013/11/13/094053">次世代の”英文を理解する方法”を提供するサービス『Grasphy』 - 巨人の肩の上に登る</a> <a href="http://mayo.hatenablog.com/entry/2014/03/02/071317">リーンキャンバスのWebツールを作ってみた - 巨人の肩の上に登る</a>