あいかわらずWebサイトの制作に絡んでおりますが、最近はめっきりJavaScriptを扱うことがどんどん多くなってきました。
- パララックスなどのスクロールを使ったアニメーション表現
- 複雑なロジックでの見積コンテンツ
- 診断コンテンツ
- Ajax主体のショッピングサイト
- etc..
Flashの衰退に伴って複雑なプログラムも少なくないのが現状です。JavaScriptを開発していてよく使うデバッグツールとしては、
あいかわらずWebサイトの制作に絡んでおりますが、最近はめっきりJavaScriptを扱うことがどんどん多くなってきました。
Flashの衰退に伴って複雑なプログラムも少なくないのが現状です。JavaScriptを開発していてよく使うデバッグツールとしては、
メモGitの使い方をおさらいする。
//プロジェクトのディレクトリ作成 mkdir project_name //移動 cd project_name //初期化 git init //リモートの追加(設定) git remote add origin https://takamori@bitbucket.org/takamori/javascript_commons.git //ステージやワーキングコピーの状態を確認 git status //変更をステージに上げる git add index.html css/ js/ //変更を全てステージに上げる git add -u //変更を部分指定してステージに上げる(対話コマンド) git add -p //ファイルの変更点をdiff表示 (ワーキングコピーとステージ) git diff [ファイル名] //ファイルの変更点をdiff表示(ステージと前回コミット) git diff --cached //ステージのファイルを取り消す。 git reset HEAD index.html //フォルダをステージから下げる git rm -r --cached js //ローカルリポジトリにコミットする git commit -m "commit_message" //ファイルをコミット時点までもどる git checkout -- readme.txt //全て前回コミット時点迄戻る git reset --hard HEAD //ブランチを作成 git checkout -b yamashiro_work //ブランチ一覧を確認 (ローカル、リモート) git branch git branch -r //ブランチを切り替える git checkout master //ブランチを削除 git -d branchname //ブランチ名を変更 git -m newname (現在のブランチ) git -m oldname newname (ブランチ名で指定) //リモートへの変更適用 git push origin yamashiro_work(←ブランチ名) //直前のコミットに変更を追加 //1:あっ!!間違えてコミット .. orz.. //2:落ちついて、、修正を変更を修正する。 //3:以下のこまんどで修正を前回コミットに追加。 git commit --amend
iOSシミュレータとかスマホとかのスクリーンショットの取り方メモ
Cmd + Ctrl + C でクリップボードのに画面をキャプチャ Cmd + Shift + Ctrl + 4 でOS標準のキャプチャ立ち上げ、スペースをおしてウィンドウをキャプチャ対象にして、iOSシミュレータをクリック
iPhoneでは「ロールペイパー」アプリをインストールして入れて、iPhoto経由でPCに持ってくる。 Androidでは、「WebSnap 」アプリで可能、こちらはEclipseへAndroidプラグインが入っているとPCから写真を取り出せて便利
ブラウザの拡張機能でとる。 Chromeなら「Screen Capture 」とかいうエクステンションでとる。
むかしからhtmlコーディングしていていつもWordPressの投稿するエディタはひどいと思ってましたが、いつの間にかとても優秀になってきてました。
いまではビジュアルエディタが手放せません。
こつをつかめば絶対にビジュアルエディタの方が早く編集出来ると思います。
<script id="itemTemplate" type="text/x-jsrender"> <div class="item"> <img class="item1" src="images/top/{{>type}}1.png" alt="{{>label}}" /> <img class="item2" src="images/top/{{>type}}2.png" alt="{{>label}}" /> <img class="item3" src="images/top/{{>type}}3.png" alt="{{>label}}" /> <img class="item4" src="images/top/{{>type}}4.png" alt="{{>label}}" /> <img class="item5" src="images/top/{{>type}}5.png" alt="{{>label}}" /> <img class="item6" src="images/top/{{>type}}6.png" alt="{{>label}}" /> <img class="item7" src="images/top/{{>type}}7.png" alt="{{>label}}" /> </div> </script>
{{>val}}は、エスケープあり {{:val}}は、エスケープ無し
{{if is_new !== 1}} <div>New!</div> {{/if}}
<ul id="target"></ul> <script id="sampleTemplate" type="text/x-jsrender"> {{for array}} <li>{{:#data}}</li> {{/for}} </script> <script> var array = [123,456,789]; var outputHtml = $("#sampleTemplate").render(array); </script>
参考URL
http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html
jQueryMobileで外部サイトにリダイレクト処理をする(header関数を使った)PHPのプログラムに普通にAjaxリンクすると怒られた。
<a rel=”external” href=”xxxx.php” ~~ >リンク先</a> として。
jQueryMobileで動的に読み込んだ要素に、デザインが適用されないです。
そんな時は以下のように、要素にcreateイベントを発生させてあげるとでけた。
var html = "AjaxでよんだHTMLがはいってるよ"; $("#target").append(html).trigger( "create" );
Powered by WordPress & Theme by Anders Norén