ipad対応(web), js,cssメモメモ
iPad（iPhone)向けのウェブアプリデモとしてCSS3を弄るなう。
-webkit-transform、特に3D機能はやっぱりsafari(apple)さんが圧倒的なパフォーマンスを誇りますね
現時点でsafariのシェアが高い気は全くしないので、純粋なウェブでやるときはmozのとかchromeさんたちあたりに対応させて組むのでしょうね
padやらphone向けであればsafariであること前提なのでありがたいです
chromeさんでもそれなりにリッチにできそうですが、safariと比べてしまうと明らかにまだ劣ってます
今後どうせいつかみんな対応するだろうから、とりあえずsafari向けでクオリティ高いのを作る癖をつけておくと、いつかきっと俺TUEEEEEEEEEE!! できるんじゃないかと、勝手に思ってます
今月末くらいには、ちょろっと公開される予定、みたいです
とりあえずメモ
iPad, iPhoneでは、どうもonClickのイベントはストレスマッハな為使うのは控えめにしたほうが良さそう
クリックの判定にディレイが発生するらしく、せっかくぬるぬる動くのにその待ち時間でストレスがマッハです
ontouchstart, move, endを使ってクリック判定してあげるとパソコンでのonclickみたいにサクサク動きました
startイベントを取得したら、呼び出す関数で「タッチされたよフラグ」を on にして
moveイベントを取得したら、呼び出す関数で「動いちゃったよフラグ」を on にして
endイベントを取得したら、呼び出す関数でタッチフラグが on で moveフラグが off のときにクリックだ！
というように僕はやりました
このやり方はどうなんでしょうね？
もっと効率がいいやり方があるのでしょうか？
ipad2はいいのでしょうけども、ipad1はビックリするくらいクソスペなために、地味に実装に気を使いますよね
css3様が爆誕したので、基本動きは全部cssでやるのがよさそうです
jsでアニメーションを作ったり、ちょっと重い処理をしようとすると、かなり重いです
あとjqueryとかもあんまり使わない方がいいんじゃないかなぁ、と個人的に思ったり
そもそもブラウザはsafariさんのみ対応でやるようなもんだし……
余談ですが、勉強するときはjquery使わないので、$で取ってきた子にappendChildとかできなくて涙目になったりしました
jQueryで返ってくる子は全員jQuery Objectだよ！
メソッドチェーンが、なんちゃらかんちゃら
罠にハマらないように注意！
あとjQuery Pluginは作るの簡単とか言うけど、情弱の僕は結構作るのに時間かかったよ！
$.fn.extendと$.extendとかの違いをみんなサクっと正確に把握しているのでしょうかね？
僕はなんとなく理解するのに時間かかりました
そして現在すでに、あんまり覚えていません
もっかい自分の書いたplugin読みなおそう、そのうち……
そして丁寧に説明が載せられたらいいな……
あれって、pluginを作ってみようって、ホント超簡単なのを作った例が載ってるか
なかなかに複雑で長いのが、弱者向け説明なしで載ってるかの2択で地味に困るよねっ
僕は困りましたね
-webkit-transform、特に3D機能はやっぱりsafari(apple)さんが圧倒的なパフォーマンスを誇りますね
現時点でsafariのシェアが高い気は全くしないので、純粋なウェブでやるときはmozのとかchromeさんたちあたりに対応させて組むのでしょうね
padやらphone向けであればsafariであること前提なのでありがたいです
chromeさんでもそれなりにリッチにできそうですが、safariと比べてしまうと明らかにまだ劣ってます
今後どうせいつかみんな対応するだろうから、とりあえずsafari向けでクオリティ高いのを作る癖をつけておくと、いつかきっと俺TUEEEEEEEEEE!! できるんじゃないかと、勝手に思ってます
今月末くらいには、ちょろっと公開される予定、みたいです
とりあえずメモ
iPad, iPhoneでは、どうもonClickのイベントはストレスマッハな為使うのは控えめにしたほうが良さそう
クリックの判定にディレイが発生するらしく、せっかくぬるぬる動くのにその待ち時間でストレスがマッハです
ontouchstart, move, endを使ってクリック判定してあげるとパソコンでのonclickみたいにサクサク動きました
startイベントを取得したら、呼び出す関数で「タッチされたよフラグ」を on にして
moveイベントを取得したら、呼び出す関数で「動いちゃったよフラグ」を on にして
endイベントを取得したら、呼び出す関数でタッチフラグが on で moveフラグが off のときにクリックだ！
というように僕はやりました
このやり方はどうなんでしょうね？
もっと効率がいいやり方があるのでしょうか？
ipad2はいいのでしょうけども、ipad1はビックリするくらいクソスペなために、地味に実装に気を使いますよね
css3様が爆誕したので、基本動きは全部cssでやるのがよさそうです
jsでアニメーションを作ったり、ちょっと重い処理をしようとすると、かなり重いです
あとjqueryとかもあんまり使わない方がいいんじゃないかなぁ、と個人的に思ったり
そもそもブラウザはsafariさんのみ対応でやるようなもんだし……
余談ですが、勉強するときはjquery使わないので、$で取ってきた子にappendChildとかできなくて涙目になったりしました
jQueryで返ってくる子は全員jQuery Objectだよ！
メソッドチェーンが、なんちゃらかんちゃら
罠にハマらないように注意！
あとjQuery Pluginは作るの簡単とか言うけど、情弱の僕は結構作るのに時間かかったよ！
$.fn.extendと$.extendとかの違いをみんなサクっと正確に把握しているのでしょうかね？
僕はなんとなく理解するのに時間かかりました
そして現在すでに、あんまり覚えていません
もっかい自分の書いたplugin読みなおそう、そのうち……
そして丁寧に説明が載せられたらいいな……
あれって、pluginを作ってみようって、ホント超簡単なのを作った例が載ってるか
なかなかに複雑で長いのが、弱者向け説明なしで載ってるかの2択で地味に困るよねっ
僕は困りましたね
php, ajaxで初心者が作る動的チャット: 下準備
完全初心者がPHP, javascript(ajax)、データベースを使ってリロードのいらない動的チャットを作ってみる。
PHPとjavascriptの勉強として０（知識的な意味で）から動的チャットを作ってみよう、ということで実装方法がスマートではない可能性は限りなく100%に近いですが、頑張って作りつつ、本当に何も分かってない状態で詰まったところをメモって行こうと思います。
初心者以外の方には目新しい物は無いと思われますが、突っ込みどころは至る所にあると思われます。
データベースをわざわざ使う必要はないかと思いましたが、せっかくなので使ってみることにしてみました。
データベースはPostgresを採用していますが、導入が地味に面倒だった記憶があるのでMySQLをオススメします。
本当は環境構築から書いていくつもりでしたが、以前に環境を作ったので、どこで詰まったのか、どうやって解決したのかを不覚にもハッキリと覚えてないため割愛します。
PostgresとPHPを接続するところで手間取ったので、デフォルトの状態から使えるMySQLを使えば比較的スムーズに行くと思います。
今後時間を見つけて、windows7 環境で環境構築してその手順を乗っけられたらいいなぁと思っております。
--------------------------------
では、一通りの環境が準備出来た状態からですがシコシコと頑張っていこうと思います。
僕のスタイルとして、無駄に話がソレ気味になってしまうのですが、ご了承ください。
とりあえずNetBeansを公式サイトからダウンロードしてきます。
このページにある、PHPと書いてあるのをポチッとダウンロード～。
ちなみにeclipseとか他のIDEもありますが、なんか猫が可愛いのでNetBeansにしました。
本当にしっかり覚えたい人はテキストエディタで書くのがmore betterらしいので、男らしい人はテキストエディタでもいいかもしれません。
メモ帳はあまりオススメしません。
windows環境であれば、僕はsakura editorを使用しております。
他にもたぶんたくさんあるのですが、僕はとりあえずsakuraです。
使いこなせてはいません。
macであれば、cot editorとかmiというのが有名で使いやすいようです。
使用していて、俺すげぇ感を味わえるのはvim, emacsなどだと思います。
優秀な方達ほどそれらを使ってる傾向が強いように感じます。
僕はあまり使えないです。
それでは、早速ダウンロードしたNetBeansをインストールして起動して、プロジェクトを作成してみましょうか。
インストールはインストーラの指示にしたがって行ってください。
基本的に全部次へ、でも問題ないはずです。
インストールが完了したら、さっそくNetBeansを起動してください。
立ち上がったら、メニューバーから、ファイルを選択して新規プロジェクトをクリック
カテゴリでPHPがデフォルト(初期状態)で選ばれていると思うので、そこはそのままで、その横のプロジェクトから[PHP アプリケーション]を選択肢、次へを押します
プロジェクト名には好きな名前でいいですが、分かりやすくchatとかでいいんじゃないですかね。
ソースフォルダは参照ボタンを選択し、インストールしたapacheのhtdocs以下へ場所をしていしてあげてください。
設定ファイルを弄ればいろいろ出来るのですが、今回はとりあえず分かりやすく直下へ置いてもらって大丈夫です。
PHPのバージョンは自分のインストールしたPHPのバージョンを指定してください。
僕の場合はPHP 5.3ですね。
デフォルトのエンコーディングは基本的にデフォルトのままで問題ないと思いますが、文字化けが発生するようであれば、変更した方がいいです。Shift_JISとかEUC-JPなどを試せばどれかで動くと思います、たぶん。
NetBeansのメタデータを別ディレクトリに配置というチェックはよくわからないのであれば、特にチェックをする必要はありません。
ここまで全て設定したら、また次へ、を選択してください。
次の画面で、実行方法という項目はデフォルトで「ローカルwebサイト（ローカルwebサーバーで実行中）」が選択されていると思われますので、そのままで大丈夫です。
プロジェクトURLは http://localhost/chatとなっているとおもいますが、これはapacheが立っているURLを指定します。
よくわからなければ、とりあえずこのままでいいです。
あとから変更する事もできますので。
たぶん http://localhost:8080/chatになるような気がしなくもないですが。
そこまでやったら、また次へ。
ここになにやらフレームワークがどうとか出ていますが、今回はどれにもチェックを入れず完了を押してください。
フレームワークについて説明はしませんが（できませんが）、超簡単に言ってしまえば、開発を効率的に行えるように便利にサポートしてくれるプログラムの集まりみたいな、そんな雰囲気です、たぶん。
気になった人は検索してみてください。
さて、完了を押したらNetBeansの画面に何やら出来ていると思います。
それがプロジェクトです。
すでにソースファイルと、インクルードパスというフォルダっぽいものが出来ていると思います。
なんのこっちゃよくわからないと思いますが、とりあえずソースファイルというところに自分で書いたプログラムを置く、という感じです。
PHPはhtmlに埋め込んで使うもの（らしい）のですが、なんかいまいち良く分からないので、とりあえず僕なりにフォルダを切って行こうと思います。
ソースファイルのところで右クリックをして、新規からフォルダを選択します。
これでフォルダが作れる訳ですが、ソースファイルのところで右クリックで作るとソースファイルという場所の直下にフォルダが作れます。
ひとまず、僕は image, css, js, php, sqlというフォルダを作りました。
それぞれの意味は
imageが画像を保存するフォルダ。
cssがstyle sheetを保存するフォルダです。ようわからんかもしれませんが、そのうち出てきます。
jsはjavascriptを保存しておくフォルダ。これも（ry
phpはPHPファイルを保存するフォルダです。htmlにはphpを埋め込まない方式で作成して行こうという思いつきからです。
sqlはデータベースを作成するコードを保存するフォルダです。普通はあまりプロジェクトに含めないと思われるものですが、どこかにやってしまうと嫌なので、とりあえず今回はプロジェクトに入れています。多分本来はあまり入れない方がいいんじゃないかという気がします。
htmlファイルは？ と思うかもですが、とりあえず今回はソースフォルだ直下においていこうと思います。
なんか嫌だなぁと思う方はhtmlフォルダを切って、index.htmlのみソースフォルダ直下に置いて、他はhtmlフォルダに入れておくといいと思います。
なんでindex.htmlだけ直下なの？ と思うかもしれませんが、冷静に考えてみたらなんでか明確な理由をしらないことに気づきました。
トップページだから、わかりやすく上の階層に置いておくのかな？
設定でプロジェクト直下のindex.htmlなどを読み込むようになってるのが多いからなのかな？
今度調べてみます。
そういうところをしっかり押さえてる人が成長するんでしょう。
今のところ僕は全然駄目ですね。がんばろう。
PHP,apache, Postgres(MySQL)のインストールを省くというクソ内容ですが、最低限の下準備がこれで完了です。
上記のインストールについては今後時間があるときに追加する予定ですが、今はひとまずこんな感じで。細かい手順は後日更新します。
次回はhtml,cssの基本的なことをおさえつつログインページを作りたいと思います。
PHPとjavascriptの勉強として０（知識的な意味で）から動的チャットを作ってみよう、ということで実装方法がスマートではない可能性は限りなく100%に近いですが、頑張って作りつつ、本当に何も分かってない状態で詰まったところをメモって行こうと思います。
初心者以外の方には目新しい物は無いと思われますが、突っ込みどころは至る所にあると思われます。
僕の環境
・mac book air : Mac OS X 10.6.7
・PHP Version 5.3.3
・PostgreSQL 9.0.2
・apache 2.2.16
・IDE : NetBeans 7.0
・mac book air : Mac OS X 10.6.7
・PHP Version 5.3.3
・PostgreSQL 9.0.2
・apache 2.2.16
・IDE : NetBeans 7.0
データベースをわざわざ使う必要はないかと思いましたが、せっかくなので使ってみることにしてみました。
データベースはPostgresを採用していますが、導入が地味に面倒だった記憶があるのでMySQLをオススメします。
本当は環境構築から書いていくつもりでしたが、以前に環境を作ったので、どこで詰まったのか、どうやって解決したのかを不覚にもハッキリと覚えてないため割愛します。
PostgresとPHPを接続するところで手間取ったので、デフォルトの状態から使えるMySQLを使えば比較的スムーズに行くと思います。
今後時間を見つけて、windows7 環境で環境構築してその手順を乗っけられたらいいなぁと思っております。
--------------------------------
では、一通りの環境が準備出来た状態からですがシコシコと頑張っていこうと思います。
僕のスタイルとして、無駄に話がソレ気味になってしまうのですが、ご了承ください。
とりあえずNetBeansを公式サイトからダウンロードしてきます。
このページにある、PHPと書いてあるのをポチッとダウンロード～。
ちなみにeclipseとか他のIDEもありますが、なんか猫が可愛いのでNetBeansにしました。
本当にしっかり覚えたい人はテキストエディタで書くのがmore betterらしいので、男らしい人はテキストエディタでもいいかもしれません。
メモ帳はあまりオススメしません。
windows環境であれば、僕はsakura editorを使用しております。
他にもたぶんたくさんあるのですが、僕はとりあえずsakuraです。
使いこなせてはいません。
macであれば、cot editorとかmiというのが有名で使いやすいようです。
使用していて、俺すげぇ感を味わえるのはvim, emacsなどだと思います。
優秀な方達ほどそれらを使ってる傾向が強いように感じます。
僕はあまり使えないです。
それでは、早速ダウンロードしたNetBeansをインストールして起動して、プロジェクトを作成してみましょうか。
インストールはインストーラの指示にしたがって行ってください。
基本的に全部次へ、でも問題ないはずです。
インストールが完了したら、さっそくNetBeansを起動してください。
立ち上がったら、メニューバーから、ファイルを選択して新規プロジェクトをクリック
カテゴリでPHPがデフォルト(初期状態)で選ばれていると思うので、そこはそのままで、その横のプロジェクトから[PHP アプリケーション]を選択肢、次へを押します
プロジェクト名には好きな名前でいいですが、分かりやすくchatとかでいいんじゃないですかね。
ソースフォルダは参照ボタンを選択し、インストールしたapacheのhtdocs以下へ場所をしていしてあげてください。
設定ファイルを弄ればいろいろ出来るのですが、今回はとりあえず分かりやすく直下へ置いてもらって大丈夫です。
PHPのバージョンは自分のインストールしたPHPのバージョンを指定してください。
僕の場合はPHP 5.3ですね。
デフォルトのエンコーディングは基本的にデフォルトのままで問題ないと思いますが、文字化けが発生するようであれば、変更した方がいいです。Shift_JISとかEUC-JPなどを試せばどれかで動くと思います、たぶん。
NetBeansのメタデータを別ディレクトリに配置というチェックはよくわからないのであれば、特にチェックをする必要はありません。
ここまで全て設定したら、また次へ、を選択してください。
次の画面で、実行方法という項目はデフォルトで「ローカルwebサイト（ローカルwebサーバーで実行中）」が選択されていると思われますので、そのままで大丈夫です。
プロジェクトURLは http://localhost/chatとなっているとおもいますが、これはapacheが立っているURLを指定します。
よくわからなければ、とりあえずこのままでいいです。
あとから変更する事もできますので。
たぶん http://localhost:8080/chatになるような気がしなくもないですが。
そこまでやったら、また次へ。
ここになにやらフレームワークがどうとか出ていますが、今回はどれにもチェックを入れず完了を押してください。
フレームワークについて説明はしませんが（できませんが）、超簡単に言ってしまえば、開発を効率的に行えるように便利にサポートしてくれるプログラムの集まりみたいな、そんな雰囲気です、たぶん。
気になった人は検索してみてください。
さて、完了を押したらNetBeansの画面に何やら出来ていると思います。
それがプロジェクトです。
すでにソースファイルと、インクルードパスというフォルダっぽいものが出来ていると思います。
なんのこっちゃよくわからないと思いますが、とりあえずソースファイルというところに自分で書いたプログラムを置く、という感じです。
PHPはhtmlに埋め込んで使うもの（らしい）のですが、なんかいまいち良く分からないので、とりあえず僕なりにフォルダを切って行こうと思います。
ソースファイルのところで右クリックをして、新規からフォルダを選択します。
これでフォルダが作れる訳ですが、ソースファイルのところで右クリックで作るとソースファイルという場所の直下にフォルダが作れます。
ひとまず、僕は image, css, js, php, sqlというフォルダを作りました。
それぞれの意味は
imageが画像を保存するフォルダ。
cssがstyle sheetを保存するフォルダです。ようわからんかもしれませんが、そのうち出てきます。
jsはjavascriptを保存しておくフォルダ。これも（ry
phpはPHPファイルを保存するフォルダです。htmlにはphpを埋め込まない方式で作成して行こうという思いつきからです。
sqlはデータベースを作成するコードを保存するフォルダです。普通はあまりプロジェクトに含めないと思われるものですが、どこかにやってしまうと嫌なので、とりあえず今回はプロジェクトに入れています。多分本来はあまり入れない方がいいんじゃないかという気がします。
htmlファイルは？ と思うかもですが、とりあえず今回はソースフォルだ直下においていこうと思います。
なんか嫌だなぁと思う方はhtmlフォルダを切って、index.htmlのみソースフォルダ直下に置いて、他はhtmlフォルダに入れておくといいと思います。
なんでindex.htmlだけ直下なの？ と思うかもしれませんが、冷静に考えてみたらなんでか明確な理由をしらないことに気づきました。
トップページだから、わかりやすく上の階層に置いておくのかな？
設定でプロジェクト直下のindex.htmlなどを読み込むようになってるのが多いからなのかな？
今度調べてみます。
そういうところをしっかり押さえてる人が成長するんでしょう。
今のところ僕は全然駄目ですね。がんばろう。
PHP,apache, Postgres(MySQL)のインストールを省くというクソ内容ですが、最低限の下準備がこれで完了です。
上記のインストールについては今後時間があるときに追加する予定ですが、今はひとまずこんな感じで。細かい手順は後日更新します。
次回はhtml,cssの基本的なことをおさえつつログインページを作りたいと思います。