万年素人からHackerへの道

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

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

    第1回 渋谷 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で描画
    OpenGLcanvasかな??

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

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

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

    □株式会社コロプラ 大注目アプリ!『秘宝探偵キャリー』HTML5開発事例発表(1)
    今年の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/CSSJavaScriptをローカルにキャッシュする仕組み
    →オフラインで動く
    →超強力なキャッシュ機構として有力

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

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

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

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

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

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

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

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

    ・DOMオブジェクトで
     8フレーム/秒

    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
    デュプリケートされた