万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    資産運用ブログ　アセマネ
    • ・寄付お願いします
      YENTEN：YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny：ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban：8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1
      Skycoin：KMqcn7x8REwwzMHPi9fV9fbNwdofYAWKRo

    ■

    第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表

    http://atnd.org/events/25251

    □クロカワ リュート (@180mm)
    （ハンゲーム）
    http://cssnite.jp/lp/lp13/reprise/20110205cssnitelp13reprise_180mm.pdf
    ターゲットを明確にする
    Web業界以外もターゲットに

    ・一般ユーザを集客（問題点）
    お金がない
    広告出す余裕もない
    Twitterでツイート使っても業界の人しか見てない

    元々
    有名企業
    元々一般人だけど有名

    @d_v_osorezan　ダ・ビンチ・恐山さん
    n_tommy？？

    有名人じゃなくても有名な人

    ネタっぽい面白いツイート
    逸脱な批判・思想のツイート

    @_ehita_

    血液型bot
    @blood_type_bot
    →フォロアが増えた

    ・twitterわらしべ長者in渋谷モヤイ像
    http://ehita.mochrom.jp/others/79/

    サンフランシスコで友達を100人作った
    ギチチョコツイート

    求めていない情報には誰も来ない

    バカっぽい、ネタは長続きはしない

    エイプリルフール、クリスマスなど相性がいい
    リソースには限りがある、取捨選択する


    ・JavaScriptでリッチUIは込みにくい
    Appストアみたいなのを作ったらAndroid
    HTC→エクスペリアを対応したが結局アニメーションはオミットした
    コロプラのAndroid凄い

    ・レスポンシブル
    　IEは怖い
    設計のハンドリングが肝になる
    自社開発はハンドリングができる。

    デザイナーはPCのデザインしかさせない

    技術的なのはできる
    Objective-C　アイフォンアプリの表現ができる

    開発効率かリッツなのをとるのか？

    HTMLで描画
    OpenGLかcanvasかな？？

    言語は書き方が違うだけ
    設計が大事
    選択肢を持つのが大事

    HTMLであるメリット
    →ブラウザさえあえば誰でもアクセスできる

    Botのフォローにどうアプローチしたか？
    中の人として顔を出す。

    □株式会社コロプラ 大注目アプリ！『秘宝探偵キャリー』HTML5開発事例発表（１）
    今年の1月にAndroidにリリース

    ・詳解
    2009年からコロプラに参画した

    Chromeで動く
    音楽とサウンド

    秘宝を集める

    HTMLとJSとスタイルシート

    位置とエンターテインメント
    255万人

    コロプラのサービス上で動いてる。

    人数100人でやることが多い。
    16%の普及率。

    リリースまでのあらまし
    2011年9月
    年内にWebアプリを出そう。

    スマートフォンに最適化されたUIを目指そう。
    スマフォ専用に仕様。
    2011年9月にプロジェクトの承認
    10月スモールチームにて小判技術の研究開発
    専属で関わっている人はいない。

    Web Strage
    Application Catche
    CSS Animation
    JavaScriptの性能評価

    プロジェクトメンバー合流

    データの設置
    →レベルデザイナ
    最後のチューニング
    需要が高まっている

    未来のUX

    ◯動作を早く
    サクサク動く
    3G回線でもサクサク動かないといけない
    Android2.2未満を切る決断

    高速なのはどうやればできる？
    1.従来の動的HTML（サーバで創り上げてクライアントに返す）　←応答速度△
    2.静的HTML＋Ajax　サーバから画面をとって再構築する　　←応答速度◯
    3.動的HTML＋Ajax ＋ WebStrage ←採用
    →　WebStrageを使っている　通信量がなくなる

    ・キーバリューで保存しておく
    Web Strage（2種類ある）
    >localStrage
    >sessionStrage

    →『秘宝探偵キャリー』ではローカルストレージを使用している。
    WebStrage - localStrage (ブラウザを閉じても保持される)

    ◯API-JavaScript
    ・値のセット
    プロパティ名に直接
    ・値の取り出し
    プロパティアクセス


    ◯見た目の演出
    CSSアニメーション

    ◯機種依存
    フィーチャーフォンでもあったがスマフォでも

    キャッシュに適したコード

    Ajaxすらlocalに保存する。電波がなくてもページ遷移可能。

    他人のコードで変更されるのは適さない

    文字列しか対応していないブラウザも多い
    →オブジェクトはJSONにして保存する

    全角文字は保存しないほうがいい

    ◯Appliation Catche
    →HTML／CSS／JavaScriptをローカルにキャッシュする仕組み
    →オフラインで動く
    →超強力なキャッシュ機構として有力

    今回、秘宝探偵プロジェクトでは使用しませんでした
    ・manifest を消す方法がiOSでは確率されていないようである

    オープニング画像や初期データがない
    サーバーからのリリース読み込み時間が問題　30s〜50s

    ・リソース埋め込み
    ネイティブアプリ内にimage BGM SEを組み込んでいる
    JavaSriptを介してNativeCall→画像はDOMに変換

    JavaScriptをブリッジにして音楽を
    位置登録、アプリ内課金もネイティブ

    Base64に変えCSSとして
    画像に関して一番早いのは、”ブラウザのキャッシュが最も早い”

    初回から早くしたい。
    2番目にはやいのは、ネイティブからのロード。
    Base64に変えた画像のデータ
    GalaxyS2
    0.5秒から1秒

    画像サイズが小さければ〜ミリ秒で

    CSS3でほぼ動いてる。
    タイマーを使って毎回レンダリングするのもできる。

    ・DOMオブジェクトで
    　８フレーム／秒

    ・Canvas
    　6〜10フレーム／秒
    　→安定しない

    • webkit-transition-property:background-color

    →transition（時間的変化）効果を適用するCSSプロパティ名を指定する際に使用。

    アドオンとして、opacity

    ・Tips
    transform3dを仕様
    transformだと画像がちらちく
    ハードウェアアクセラレーションがONになる

    ・角丸、半島系、グラデーションはCSSにお任せ

    1つの画像は100kb以下
    ◯ImageOptim
    →無料の画像圧縮ツール
    角丸半透明グラデーションはCSS 画像は100k以内 pngでなくjpg

    Jpeg
    →正方形であればjpeg
    部分的にpngを使ってる

    ◯機種依存
    ・CSSのプロパティななるべく%指定
    Androidで拡大縮小をscale変換すると、アニメーションが終わった時に何故か戻る、

    →バグ！！
    背景画像を用意して消しておき、アニメーション終了時に表示して入れ替える。
    「オープニング。カードを合成するところ。」
    →カメラのズーム部分

    ・オープニング
    ダウンロードした直後も早くしたい。

    エンジニアはコアで3人で作ってる

    ・圧縮のアプリ
    →一般的なツールの『OPTPiXhttp://www.webtech.co.jp/optpix/』
    　ImageOptimというフリーもある

    ・ネイティブからアプリのロード
    ブラウザからデバッグが難しいのでは？？



    MySQLのコネクタ　Python

    ・たくさんpypiにあった
    http://pypi.python.org/pypi?%3Aaction=search&term=MySQL&submit=search

    MySQL-ConnectorはOracle製品？
    →インストール

    sudo pip install MySQL-Connector

    create_engine()での指定は'mysql+mysqlconnector'と書くっぽい。ドライバの名前はどうやって決まってるのかしら？

    →こちらにあった
    http://docs.sqlalchemy.org/en/latest/core/engines.html#supported-databases

    TeaspoonでTornado使う MacOSX

    以前やろうとしてた「Teaspoon」の続き
    URL:https://github.com/marxus85/teaspoon

    • Python3では「MySQLdb」がまともに動かないので「pymysql3」を使用する
    sudo pip install pymysql3==0.4

    →Python2では別のMySQL-pythonを入れるがWindowsでは問題有るみたい

    sudo pip install MySQL-python

    http://www015.upp.so-net.ne.jp/tripod/zope.html(日本語：誤ってるが・・・)
    http://sourceforge.net/projects/mysql-python/forums/forum/70460/topic/3108914（英語）

    • 「models/__init__.py」をいじる

    →「+pymysql」を追加

    #engine = create_engine('mysql://teaspoon:teaspoon@localhost/teaspoon')
engine = create_engine('mysql+pymysql://teaspoon:teaspoon@localhost/teaspoon')

    MySQLのポート番号によっては以下のようになる（今回は3306）

    engine = create_engine('mysql+pymysql://teaspoon:teaspoon@localhost:3306/teaspoon')
    • XAMPPでMySQLで以下の情報追加
    ID:teaspoon
PASS:teaspoon
データベース:teaspoon
テーブル:teaspoon

    →teaspoon

    • Python3特有のエラー

    参考URL:https://github.com/petehunt/PyMySQL/issues/83

    sudo vi /Users/shinriyo/ve/fb_env/lib/python3.2/site-packages/pymysql/cursors.py

    ↑ 「cursors.py」の96行目を以下のように修正する

    #query = query % conn.escape(args)
query = query.decode(charset) % conn.escape(args)

    sqlalchemyでなぜかdenyされる！　Windows

    XAMPPでインストールされたMySQLはコンソールではうまくいくのにsqlalchemyから拒否される（Windows）
    ・これはつながる

    c:\xampp\mysql\bin\mysql.exe -u teaspoon -p

    ・権限も強い

    mysql> SHOW GRANTS FOR 'teaspoon'@'localhost';
+--------------------------------------------------------------------------------------------------------------------------------------------+
| Grants for teaspoon@localhost                                                                                                              |
+--------------------------------------------------------------------------------------------------------------------------------------------+
| GRANT ALL PRIVILEGES ON *.* TO 'teaspoon'@'localhost' IDENTIFIED BY PASSWORD '*C46AB6C0D67A018C7F19102C0E97E4A333976B36' WITH GRANT OPTION |
+--------------------------------------------------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)

    ・使用DBは「teaspoon」に変更できてる

    mysql> use teaspoon
Database changed

    ・テーブルだって作れる。

    mysql> CREATE TABLE teaspoon(id INT(11)
Query OK, 0 rows affected (0.07 sec)

    しかしsqlalchemyは・・・

    from sqlalchemy import *

engine = create_engine('mysql+pymysql://teaspoon:teaspoon@localhost:3306/teaspoon')
metadata = MetaData()
t = Table('mytable', metadata,
    Column('mytable_id', Integer, primary_key=True)
)
metadata.create_all(engine)

    エラー！！！

    sqlalchemy.exc.InternalError: (InternalError) (1045, "#28000Access denied for user 'teaspoon'@'localhost' (using password: YES)") None None

    ちなみにこのようにしていしてもだめだった。localhostだめ？

    c:\xampp\mysql\bin\mysql.exe go_latest --user='teaspoon' --password='teaspoon' -h 127.0.0.1

    BoundMetaDataはもうなくなった

    度々Blogで目にするBoundMetaDataがあるがなくなったようで

    ImportError: cannot import name BoundMetaData

    参考URL:http://www.mohdshakir.net/2007/12/13/boundmetadata-is-not-defined
    デュプリケートされた