ソーシャル・ネットワークを観たよ
僕が働いている業界ではかなりホットな映画だったんですが、観に行こうと思いつつ結局観に行かなかったので、DVD発売と当時にTSUTAYAでレンタルして観ました。
（王様のブランチで紹介されていて、観たい熱が一気に高まったのも理由ですが。）
忘れてはいけないのは、この映画はザッカーバーグ本人はインタビューに応じておらず、共同創業者のエドゥアルド・サベリン視点で描かれている作品であるということ。
（左が演じた人、右が本人。）
あくまでフィクションってことですな。
要点をまとめてみる
・スピード感もあり、音楽も素晴らしかったので、観ていてとても気持ちがよい
→コードをガリガリ書いているところとか特に。
・2つの大きな訴訟問題が進行しながら、the Facebook がローンチされた頃の回想シーンを途中に入れる。 というわかりにくい構成なのだけど、だからこそリアル感があって面白かった
・ザッカーバーグの変態さ具合が素晴らしい（いい意味で）
→変人なようにみえて、とても素直な青年。facebookのことだけを常に考え続けられる唯一の人
・facebookが成長しながら、共同創業者、ウィンクルヴォス兄弟、ショーン・パーカーとの人間関係が徐々に変化していて面白い
権利を主張して、何十億円ものお金を手にすることへの違和感
facebookのアイディアを先に思いついていたが、ザッカーバーグに出し抜かれた兄弟が、後に莫大な訴訟金を手にすることに非常に違和感。
（兄弟のアイディアは、SNSのアイディアではなく、ハーバード内での閉鎖的なSNSというサービスだけど。）
彼ら兄弟はただアイディアを思いついただけで、何もサービスを作ってないし、努力もしていないのになんでだろう？と思った。
ザッカーバーグは、アイディアをパクったように描かれてはいるが、（事実はわからないけどね）狂気じみた感覚でずっとfacebookのことだけ考え、ひたすら日々のサービスレベルをあげることに努力し、ユーザーの期待に答えていく。という、言葉で表すのは簡単だが、実行するのは非常に難しい行為をずっと続けてた。たからこその、今のfacebook。
なのに、アイディアだけ持ってた人が権利だけ主張して、金だけ取っていくというところになんか違和感を感じました。向こうののお国柄もあるのかもしれませぬが、、、
しかし、
プールに入るときと、寝ている時以外は、ずっとfacebookのことを考えている
という名言をどっかで聞いたことがあるんですが、ザッカーバーグの人とは違った狂気じみた個性あってのサービスなんだということが、映画で匠に表現されてました。
ソーシャル・ネットワークを観た、ザッカーバーグ本人のインタビュー動画
「彼女にふられた」、「女性にモテたい」がきっかけでfacebookが生まれた。
という映画の根本部分を否定していたり、
ウィンクルヴォス兄弟のことについて触れていたりなど、非常に興味深いですね。
ソーシャル・ネットワークについて語ってる面白かったブログ
・で、結局Facebook映画『ソーシャル・ネットワーク』は観るべきなの？
ザッカーバーグ自身が己の作品としてのFacebookに抱く、異常なまでの「執着心」だった。寝るときと庭のプールに飛び込むとき以外はFacebookのことを考え、プログラムを書き、現場での時間を決して削らない。ショーンは彼のその執着心が故に、ザッカーバーグを「見込みのあるやつ」と見抜く。
彼は、別に天才ではなく普通の人間だ。
ぼくもそんな印象を受けました。最年少の億万長者だから、天才だって言われてるけど、異常なまでの執念が、彼を彼たらしめているのですな。
・「フェイスブック」の芽を俺自身いくつもツブシてきた！なぜ日本で「ツイッター」は生まれなかったのか
→会社の取締役の方が朝会でおっしゃっていた日経ビジネスの記事です↑
ここにも、特別すごい技術ではなく、彼が、「度を越してやった」ことについて触れています。
スマートフォンっぽいUIを、JQueryを使わずに作ってみる2
先週に引き続きですが、今日はボタンタイプのを再現してみました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル2</title> <meta name="viewport" content="width=320px"> <style type="text/css"> a.button_link { display:block; margin:5px auto; width:70%; height:50px; -webkit-border-radius:7px; text-align:center; text-decoration:none; font-size:20px; vertical-align:middle; } a.button_link span { line-height:50px;/*a.button_linkのheightと同じ値にしないとvertical-alignが効かなくなる*/ vertical-align:middle; text-shadow: gray 0px -1px 1px; font-weight:bold; } .yellow { background: -webkit-gradient(linear, left top, left bottom, from(#ffff99), color-stop(0.50, #ffff99), color-stop(0.51, #ffd700), to(#ffd700)); border: solid 3px #ffd700; } a.yellow span { color:gray; text-shadow: white 0px -1px 1px; } </style> <body> <a class="button_link yellow" href="hoge.html"> <span>ボタン1</span> </a> </body> </html>
スマートフォンっぽいUIを、JQueryを使わずに作ってみる1
JQueryをなるべく使わずに、スマフォっぽいUIを作ってみようということで、試しにつくってみたので、そのサンプルを。
パターン1
mobageさんのものですが、とても使いやすいので試しに作ってみました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル1</title> <meta name="viewport" content="width=320px"> <style type="text/css"> ul#mypage_menu { list-style:none; padding:0; } ul#mypage_menu li { width:50%; height:60px; float:left; text-align:center; border-bottom: 1px solid #a9a9a9; } ul#mypage_menu li a { display:block; margin:0; padding:0; text-decoration:none; } ul#mypage_menu li:nth-child(odd) { border-right: 1px solid #a9a9a9; margin-left:-2px ; border-left: 1px solid #a9a9a9; } ul#mypage_menu li:nth-child(even) { border-right: 1px solid #a9a9a9; margin-right:-1px; } ul#mypage_menu li:nth-child(1), ul#mypage_menu li:nth-child(2) { border-top: 1px solid #a9a9a9; } ul#mypage_menu img { vertical-align:middle; } ul#mypage_menu span { margin-left:5px; vertical-align:middle; line-height:60px; font-size:16px; color:black; } </style> </head> <body> <nav> <ul id="mypage_menu"> <li> <a href="01.html"> <img src="img/1.gif" /> <span>メニュー1</span> </a> </li> <li> <a href="01.html"> <img src="img/1.gif" /> <span>メニュー2</span> </a> </li> <li> <a href="01.html"> <img src="img/1.gif" /> <span>メニュー3</span> </a> </li> <li> <a href="01.html"> <img src="img/1.gif" /> <span>メニュー4</span> </a> </li> <li> <a href="01.html"> <img src="img/1.gif" /> <span>メニュー5</span> </a> </li> <li> <a href="01.html"> <img src="img/1.gif" /> <span>メニュー6</span> </a> </li> </ul> </nav> <div style="clear:both;"/> </body> </html>
ちょっとしょぼいですが、アイコン画像や、背景の色をグラデーションにしたりするとかっこよくなりますよ♪
「CSSだけで、尖ったボタンを作ってみる」をやってみた。
はてなブックマークで見つけたのですが、
画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法
・iPhoneでは、
たしかに、CSSで再現されていました。
しかし、Android2.2の端末で試してみると、
このように、矢印の部分が黒く写ってしまいます。。
このCSSは、大変複雑だったので深いところまでは僕にはまだわからなかったのですが、キモの処理は、
・45度回転させる
・webkit-mask-image
みたいっすね。
具体的には、
-webkit-transform: rotate(45deg); -webkit-mask-image: -webkit-gradient(linear, left bottom, right top, from(#000000), color-stop(0.5,#000000), color-stop(0.5, transparent), to(transparent));
というところ。
webkit-mask-image
部分を試しにコメントアウトすると、
こんな感じで、尖ってる部分の上側がはみ出ています。
なので、webkit-mask-imageは、「Back」ボタンの線（border）部分に使われていると思います。
線より下の部分は、透明にして、元のグラデーションが映るようになっていると思います。
ただ、Androidでうまく映らないのであまり実用性はないのなかな？
たしかに画像の読み込みが遅いので、なるべくCSSで使いところではあるのですが、、
もう少し研究してみよう。
CODE〜コードから見たコンピュータのからくり〜
先輩にオススメされたCODE コードから見たコンピュータのからくり
ゴールデンウィーク中に読んでみました。
「第十三章 でも引き算はどうする？」
までしか読めていませんが、そこまでの読書録を。
情報のコード化
この本は、
情報のコード化
というテーマがあります。情報のコード化をわかりやすく説明するために、「懐中電灯で隣の家の友達とコミュニケーションをとる」や、「モールス信号」、「点字」などの例を挙げており、物語口調でとてもわかりやすいです。
歴史の流れに沿ってわかりやすく書かれていて、読みやすい。
モールス信号→点字→回路→・・・
と、歴史の流れに沿ってわかりやすく書かれていて、まるで歴史の教科書を読んでいるみたいでした。
最近は、HTML、CSS、Javascriptの本しか読んでいなかったので、とても新鮮。
「懐中電灯に電池を入れ、スイッチを入れるとなぜ明るくなるのか？」や、「雷」、「静電気」といった自然現象の原理についても書かれており、高校の化学の授業で習った事柄ということもあって、とても懐かしかったです。
モールス信号
国際遭難信号の「SOS」が、
S → ・・・
0 → ーーー
S → ・・・
というように、とても覚えやすいコードだったため、採用されたものだっとは意外でした。
第六章に、「電信とリレー」という章があるのですが、その章にでている装置を見て、「紅の豚」のジーナがこんな装置を使ってやりとりしていたなーと思い出しました。
ネットはもちろん、電話もなかったような時代には、このような手法が一般的だったのですね。
点字
・・
・・
・・
点字は、上の図のように、ひとつのマスの中に、計6つの点（ポイント）があり、そのひとつひとつの点が「出っ張っている場合」、「出っ張っていない場合」の2通りがあるため、「2の6乗＝64種類」のコードを表現しています。
ちょうど一年前に、ダイアログ・イン・ザ・ダークという、暗闇の中をチームで力を併せて進んでいく研修を受けさせていただきました。その会場に点字で表現されている資料がたくさん置いてあり、資料の中の文字と比較して、この点字はこの字を表現しているのかな？といろいろ探っていたのを思い出しました。
引き算が面白かった。
「253-176」を計算するとき、一の位から計算していくと、十の位から借りてこなければ計算ができないため工夫が必要になる。
そのため、以下のように分解する。
1、1000と-1000を追加
253-176+1000-10002、1000を(999+1)に分解
253-176+(999+1)-10003、順番を入れ替える
253+(999-176)+1-1000
これで、上の位から借入しなくとも計算ができるように！
また、「176-253」のように引き算の答えがマイナスになってしまうときは、
1、999と-999を追加
176-253+999-9992、順番を入れ替える
176+(999-253)-999
これで、借入せずに計算可能に！
ただ、上の計算方法を、実際の回路にし、スイッチのオンオフで計算をするところがいまいち理解できなかったので、その辺を再読しようと思います。
ゴールデンウィークということもあり、普段読まないタイプの本を読んで、脳の違ったところが活性化されて気がしました。
Android1.6、Android2.1のWebViewで、タッチイベントがまれに反応しない
先週、WebViewで、タッチイベントを拾ってくれない症状が起こって困りはてておりました。Android1.6は様々な問題がありますね、ほんとに。
端末の画面上では、オレンジ色になっているので、タッチイベントを拾ってくれているかと思いきや、まったく反応してくれない。
タッチイベントを拾ってくれないということは、次のページのリンクに進んでくれない。。そして何よりJavascriptのonclick,ontouchstart,ontouchendのイベントすらすべて拾ってくれない！！
本当にひどいですね、この仕様。
下の画像のように、オレンジ色になるのでタッチ認識しているかと思われるのですが、そうはいかないみたいっす。
（タッチした部分はオレンジ色になるのですが、タッチを検出してくれず、タッチ先のページへ進んでくれません。）
今日は、日本語の情報が皆無だったので、その解決方法をご紹介。
サンプルWebViewアプリ
import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle; import android.view.KeyEvent; import android.view.Window; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity extends Activity { WebView webView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); webView = (WebView) findViewById(R.id.webview); webView.loadUrl("http://www.google.co.jp/webhp?hl=ja"); webView.setWebViewClient(new WebViewClientDemo()); //WebViewClientを設定 webView.setWebViewClient(new WebViewClient() {}); //javascriptを有効にする webView.getSettings().setJavaScriptEnabled(true); //javascriptのalert拾えるように webView.setWebChromeClient(new WebChromeClient()); } private class WebViewClientDemo extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @Override public void onPageStarted(WebView view, String urlString, Bitmap favicon) { super.onPageStarted(view, urlString, favicon); } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { super.onReceivedError(view, errorCode, description, failingUrl); } } // キー押下時 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { // 戻るボタン押下時 if (webView.canGoBack()) { webView.goBack(); } else { this.finish(); } return true; } return super.onKeyDown(keyCode, event); } }
原因
何故かはわかりませんが、
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout>
layout.xmlで、
andoroid:layout_height="wrap_content"
としていることが原因ですｗ
なんでなんだかはよくわかりません。。
解決策
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="0px" android:layout_weight="1" /> </LinearLayout>
android:layout_height="0px"
とすると直ります。
解決方法すら笑えてきしまいますが、これで本当に問題は起こらなくなりました。
Javascriptのタッチイベントはもちろん、リンクも正常に拾ってくれます。
paddingとmargin/Xcode4でcocos2dが動かない件
paddingとmarginの二つの違いがいまいち理解できず、テキトーに決めてしまっていたのですが、すぐに忘れてしまいそうなので、少しメモ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <title>divのvertical-alignテスト</title> </head> <style type="text/css"> .table_cell_1 { vertical-align:top; border: 3px red solid; } .table_cell_2 { vertical-align:middle; border: 3px blue solid; padding:0px; margin:10px; } .table_cell_3 { vertical-align:bottom; border: 3px green solid; padding:10px; margin:0px; } .table_cell_4 { vertical-align:bottom; border: 3px black solid; padding:10px; margin:10px; } </style> <body> <div class="table_cell_1">Default padding0px; margin:0px;</div> <div class="table_cell_2">padding:0px; margin:10px;</div> <div class="table_cell_3">padding:10px; margin:0px;</div> <div class="table_cell_4">padding10px; margin:10px;</div> </body> </html>
Xcode4だとcocos2dが動かない！！
なんてこった。すこしいじってみようと思ったら、、環境設定からやり直しかorz
