tanaka's Programming Memo

プログラミングについてのメモ。

JavaScript

Phaserをサンドボックスで試す

HTML5ゲームエンジンPhaserのチュートリアルを実装する記事です。Phaserのサンドボックスを使うので、最新のWebブラウザーが動くインターネットに接続された環境で、インストール作業をせずに試すことができます。 am1tanaka.hatenablog.com am1tanaka.haten…

Phaserをサンドボックスで試す(7)文字の表示とスコアの実装

前へ 仕上げに、文字を表示して、スコアを実装します。Phaser公式チュートリアルのMaking your first Phaser game: Part 8 - Finishing touches - Learn - Phaserを参考にして進めます。 (6)星を作成するの続きです。 先のサンドボックスを閉じてしまってい…

Phaserをサンドボックスで試す(6)星を作成する

前へ | 次へ プレイヤーが集める星を作ります。Phaser公式チュートリアルのMaking your first Phaser game: Part 7 - Starshine - Learn - Phaserを参考にして進めます。 (5)プレイヤーの操作の続きです。 先のサンドボックスを閉じてしまっていたら、こちら…

Phaserをサンドボックスで試す(5)プレイヤーの操作

前へ | 次へ プレイヤーをキーボードで操作できるようにします。Phaser公式チュートリアルのMaking your first Phaser game: Part 6 - Controlling the player with the keyboard - Learn - Phaserを参考にして進めます。 (4)プレイヤーの作成・当たり判定・…

Phaserをサンドボックスで試す(4)プレイヤーの作成・当たり判定・処理落ち対策

前へ | 次へ Phaserの公式チュートリアルMaking your first Phaser game: Part 4 - Groups - Learn - PhaserとMaking your first Phaser game: Part 5 - The Body and Velocity: A world of physics - Learn - Phaserをサンドボックスで動かし、プレイヤーを…

Phaserをサンドボックスで試す(3)ゲームの舞台を作る

前へ | 次へ Phaserの公式チュートリアル「Making your first game」のMaking your first Phaser game: Part 3 - World Building - Learn - Phaserをサンドボックスで動かして、ゲームの舞台を作ります。(2)画像の読み込みと仮表示の続きです。 先のサンドボ…

Phaserをサンドボックスで試す(2)画像の読み込みと仮表示

phaser.io 前へ | 次へ Phaserの公式チュートリアル「Making your first game」をサンドボックスで動かします。この記事の続きです。 はじめに アセットの読み込み コード補完(Phaser Code Completion)の利用 コードの概要 スプライトの作成 保存 saveしても…

Phaserをサンドボックスで試す(1)Phaserの概要とサンドボックスの操作

phaser.io 次へ PCとスマホのいずれでも動作するゲームが作れるHTML5ゲームフレームワークPhaserを試します。Phaserの公式サイトにあるチュートリアル Making your first Phaser game で紹介されている記事を参考にして、Webブラウザー上でPhaserを簡単に試…

はてなブログのプログラムコードに行番号を表示する(2017/4/15修正)

プログラムコードに行番号を表示したかったので、はてなブログのカスタマイズの勉強がてら作成してみました。 出来上がりは以下のような感じ。 let hello = "Hello!"; console.log(hello+"行番号!"); ブログデザインのカスタマイズで、フッターにJavaScript…

Vue 2.1.7 にしたら webpack でエラーが発生した

Vueを2.1.7にバージョンアップしたら、以下のようなエラーが発生しました。 Error: ./resources/assets/js/components/Modal.vue Module build failed: Error: Vue packages version mismatch: - vue@2.1.7 - vue-template-compiler@2.1.6 This may cause th…

Reactでのbrowser.js(browser.min.js)が見つからない

Reactのサンプルで、CDNから browser.min.js を読み込んでいます。ローカルで動かそうと思って、index.htmlで読み込んでいるスクリプトを用意しようとしたら、 browser.min.js は、Babel6で削除されたとか言われて入手が困難です。 browser.jsとは? browser…

Gulp+React+Babel(babelify)+watchify+BrowserSyncを使ったビルド設定

Reactの復習と、記憶を呼び戻すための自分用のメモです。uglifyやらmapファイルの作成もしてないごく簡単な動作確認用のものです。 利用するもの Gulp ビルドやデプロイなどを行うツール React クライアントサイドのビューを担当するエンジン Babel 策定中の…

JavaScriptとjQueryで様々な画面サイズを取得する

Webアプリでレイアウトを制御しようとすると様々な画面サイズを把握する必要があります。iPhoneのシミュレーター上のSafariでの動作結果をまとめました。 取得方法 Webブラウザーのクライアント領域の論理ピクセル数 Webブラウザーが1画面で表示できる範囲で…

iPhone/iPadでタップが反応しないこととviewportの不具合対応

散歩リンクにおいて、iPhone/iPadだけ、以下の不具合が発生しました。 操作説明で、画面をタップして先に進む操作ができなかった 画面レイアウトが崩れていた その対処でやったことです。 タップが効かない 原因は、 iOS で click イベントがわけのわからな…

Jestの公式サイトのTutorial-React

am1tanaka.hatenablog.com公式サイトのチュートリアルの意訳です。JestによるJavaScriptの単体テスト - tanaka's Programming Memoで作成したテスト用フォルダーで試すと手軽です。2016/2/28時点では、公式サイトの情報が古くなっていてそのままでは動作しま…

Jestの公式サイトのTutorial

facebook.github.io公式サイトのチュートリアルを試します。 JestによるJavaScriptの単体テスト - tanaka's Programming Memoで設定したフォルダーでそのまま作業を続けると良いでしょう。下準備として、jQueryをインストールしておきます。 npm install --s…

JestによるJavaScriptの単体テスト

JestはFacebookが公開しているJavaScriptの単体テスト用フレームワークです。テスト用フレームワークのJasmineを使いやすく拡張したもので、expect(value).toBe(other)の書式が使えます。 公式GitHub>GitHub - facebook/jest: Painless JavaScript Unit Test…

Nodeのバージョン管理

qiita.comこちらを参考に、nodebrewで行っています。以下で安定板をインストールできます。 nodebrew install-binary stable nodebrew use <インストールしたバージョン>以上で、インストールと切り替えができます。

JavaScriptでテスト PhantomJS のインストール

JavaScriptでブラウザーでの挙動をテストする場合、Seleniumを使ってGoogle ChromeやFirefoxなどのブラウザー上で実際にテストする方法と、PhantomJSというコンソールで動かせるブラウザーでテストする方法があります。基本機能のテストでは、Seleniumを使う…

gulp+watchify+browserify+babel+reactでビルドが速くならない

watchifyでビルドの高速化を図ろうとしたところ、ビルドするたびに遅くなってしまいました。原因は、Browserifyのオプションを指定していないことでした。以下、オプションとWatchifyとBrowserifyの部分の抜粋です。propsが必要でした。 var jsSrcPath = "./…

jQueryのajaxでpostデータを送信する(再勉強メモ)

参照URL ファイルの送信方法は過去記事のこちら。 フォームに拠らないFormDataの作成方法は MDNのFormDataオブジェクトの利用 FormData - Web API インターフェイス | MDN メモ FormDataオブジェクトを作成して、appendでキーとデータのセットを追加していく…

GulpとBrowserSyncでreloadが動作しない

gulpで監視タスクを開始して、監視対象のファイルを変更すると、ログでは「Reloading Browsers...」と表示されるのですが、ブラウザは更新されないという症状が発生していました。原因として見つけたのは以下のもの。 bodyタグがないと動かない linkの指定が…

さくらインターネットのレンタルサーバーに写真コンバーターをアップロードする時にやったこと(追加2015/7/18)

写真のサイズ、時間を一括調整するツールをさくらインターネットにアップロードした時に発生したエラーをメモ。 フォルダーの属性を700にする 実行属性がないとPHPからフォルダーが作成できない。 imagickの有効化 php.iniの設定ファイルに以下を追加して、I…

browserifyでファイルを分割する Cannot find module

browserifyで、jsxファイルを複数作成してrequire()して、以下のようなエラーが発生した場合。 [13:49:26] Starting 'browserify'... events.js:85 throw er; // Unhandled 'error' event ^ Error: Cannot find module './DivTest' from '・・・/src' :拡張…

generator-react-gulp-browserifyに含まれているgulpfile.jsを読む

gulpの動作を勉強するために、やりたい処理を実現しているyeomanのrandylien/generator-react-gulp-browserify · GitHubに含まれているgulpfile.jsの中身を読んでみました。 'use strict'; strictモードにして、JavaScriptの動作を厳格にします。 var gulp =…

ReactのプロジェクトにBrowserify&ReactifyとGulpを導入してライブリロード(2015/7/1修正)

Browserifyは、JavaScriptで外部ファイルを簡単に読み込んでモジュール化する手段を提供してくれます。node.jsで動作させる時はrequireで同様のことができますが、その機能をブラウザー上で使えるようにしてくれます。Gulpはプロジェクトのビルドやテスト、…

AtomでReactのコードを書く(追記2015/7/9)

A hackable text editor for the 21st Centuryatom.io しばらくMacの開発用エディタとしてBracketsを使っていたのですが、起動が遅いのと、訳も分からずプラグインをあれこれ入れていたらインデントが崩れてしまい手間が増えてしまったので、新しいエディタ…

JSONスキーマ JSV

JSONの内容が定義に沿っているかをチェックするモジュールがJSV npmのpackage.jsonに "JSV" : "x.x.x"を追加して、「npm install」をターミナルで実行することでインストール可能 JSONスキーマについては JSON Schema and Hyper-Schema を参照

Eclipse 正規表現 置換

HTMLをJavaScriptの文字列表記に簡単に変換する方法を検討する。 MacのEclipseの手順 変換したい範囲を選択する [Command]+[F]を押して、検索・置換ウィンドウを表示 [Find:]欄に次の正規表現を入力。\は[option]+[¥]で入力 ^(\s*)(.*)\s*$ [Replace with:]…

書籍TypeScriptリファレンスのメモ

TypeScriptリファレンス Ver.1.0対応作者: わかめまさひろ,井上章,丸山弘詩出版社/メーカー: インプレスジャパン発売日: 2014/05/16メディア: 単行本(ソフトカバー)この商品を含むブログ (2件) を見る 読んだ際の備忘録。 スコープはJavaScriptと同じ スコ…

TypeScriptの概要、Macへのインストール、チュートリアル

Microsoftが開発しているいわゆるaltJSというJavaScriptのコードを生成する言語。オープンソース。再利用や規模の拡大に耐えうるコードを書くのにはJavaScriptはいくらか機能が不足していたり、分かりにくいイディオムに頼らねばならない。そこで利用するの…

Underscore.js

Backbone.jsをやるにあたり必要そうなので事前に概要を勉強。 JavaScriptの便利なライブラリ eachやmap、templateなどで簡単に書くことができる 教材… Underscore.js入門 (全10回) - プログラミングならドットインストール 公式サイト. Underscore.js 勉強し…

パーフェクトJavaScript勉強メモ(22)

前へ 22章 実践Node.jsプログラミング p502 ネットワークやファイルを非同期で処理する実例紹介 HTTPサーバ処理 http関連のAPIはhttpモジュール httpモジュールでは基本的なHTTP機能を提供 HTTPサーバ処理の基本 http.ServerクラスがHTTPサーバ処理の中心 イ…

パーフェクトJavaScript勉強メモ(21)

前へ | 次へ 21章 サーバサイドJavaScriptとNode.js サーバサイドJavaScriptの動向 p472 ネットスケープ社が提供していた時代があった 一度廃れたが復活してきた HTML5やAJAXなどや、Java仮想マシン上で動くJVM言語の盛り上がりの影響 JVMのJavaScript実装で…

パーフェクトJavaScript勉強メモ(20)

前へ | 次へ 20章 Web APIの実例 p439 Web APIのカテゴリ p440 Google Translate API Googleの翻訳用API 補足:現在は有料になっている Google Maps API p445 Google Static Maps APIは、画像タグのURLに仕込むことで、画像を得られる マイマップ p446 イン…

パーフェクトJavaScript勉強メモ(19)

前へ | 次へ 19章 Web APIの基礎 Web APIとWebサービス p422 APIとはApplication Programming Interfaceの略 Web APIが想定するシステム Web APIは、HTTPでリクエストを送り、結果を受け取る規約のこと Web APIの歴史 スクレイピング Webページはもともと人…

パーフェクトJavaScript勉強メモ(18)

前へ | 次へ 18章 WebWorkers WebWorkers概要 p408 WebWorkersとは WebWorkersの動作 通常のJavaScript実行環境をメインスレッド、Web Workersにより生成されるバックグラウンドのものをワーカと書籍では呼ぶ ワーカは複数生成できる メインスレッドとワーカ…

パーフェクトJavaScript勉強メモ(17)

前へ | 次へ 17章 WebSocket WebSocket概要 WebSocketとは p393 1本のHTTP接続上で双方向のメッセージやりとりができる HXMLHttpRequestとServer-SentEventsを利用したやりとりよりも効率がよく、設計や実装もシンプル 補足:2015/2/12現在、Operamini以外の…

パーフェクトJavaScript勉強メモ(16)

前へ | 次へ 16章 ストレージ Web Store p376 Web Storeとは WebStorageの容量は、書籍の時点では5MB程度 p377 オリジンごとに共有され、読み書きができる localStorageオブジェクトとsessionStorageオブジェクトにプロパティの読み書きをすればよい localSt…

パーフェクトJavaScript勉強メモ(15)

前へ | 次へ 15章 デスクトップ連携 Drag Drop API Drag Drop APIとは p358 DataTransferは、ドラッグ操作でブラウザとデスクトップ上のファイルのやりとりができる インターフェース ドラッグイベント ドラッグ要素とドロップ領域それぞれに必要なイベント…

パーフェクトJavaScript勉強メモ(13)(14)

前へ | 次へ 13章 HTML5概要 HTML5の歴史 HTML5の登場の経緯 p339 HTML5を推進するためにApple,Mozilla,OperaがWHATWGというコミュニティを設立。Web技術の仕様を策定し、W3Cへフィードバックをする HTML5の現状 p339 2011年当時のHTML5の状況。当時はまだIE…

パーフェクトJavaScript勉強メモ(12)

前へ | 次へ 12章 ライブラリ ライブラリを使うべき利用 p310 クライアントサイドJavaScriptで大変なのは、クロスブラウザ対策。特にIE8以前対策 jQueryの特徴 書籍の時点での最新版は1.6.2 MITライセンス p311 jQuery本体と、UIコンポーネントはjQuery UIと…

HTML要素の追加

HTML要素を追加する時のパフォーマンスをチェックしてみた。 テスト環境:MacBookAir2014 追加方法 innerHTML DocumentFragment appendChild innerHTML文字列結合 Firefox 17-25ms 27-38ms 32-40ms 15-25ms Google Chrome 25-30ms 52-90ms 55-80ms 20-35ms S…

NodeListのテスト結果

パーフェクトJavaScriptのp254のテストを実行した結果 MacBookAirで実施 1行目は、1000個のspanをgetElementByTagNameで取得して、1000回のループを回して、spanの回数を毎回lengthで取得してエレメントにアクセスした時の時間 2行目は、1000個のspanをgetEl…

パーフェクトJavaScript勉強メモ(11)

前へ | 次へ 11章 実践クライアントサイドJavaScript p281 DOM操作とイベントの扱いがクライアントサイドJavaScriptの基本 スタイル スタイル変更方法 classNameプロパティでclass名を変更する スタイル操作でもっとも簡単な方法 p282 指定した要素が隣接要…

パーフェクトJavaScript勉強メモ(10)

前へ | 次へ 10章 イベント イベントドリブンプログラミング p266 ブラウザにイベントが発生した時の関数を登録しておいて、呼び出してもらう IE8以前は独自の実装になっている イベントハンドラ/イベントリスナの設定 イベントハンドラは、1つの要素・イ…

パーフェクトJavaScript勉強メモ(9)

前へ | 次へ 9章 DOM DOMとは DOM Level1 p246 Coreモジュール…HTMLに限らない一般的なDOM操作についての仕様 HTMLモジュール…HTML文章向けのメソッド p247 getElementsByTagName…タグ名を指定して要素を取り出す createElement…要素を作成 appendChild…要素…

パーフェクトJavaScript勉強メモ(8)

前へ | 次へ 8章 クライアントサイドJavaScript クライアントサイドJavaScriptの重要性 p224 Webアプリケーションの発達 JavaScriptの高速化 p225 Google ChromeやFirefoxは6週間ごとにバージョンアップする JavaScriptの役割 見た目の分かりやすさや使いや…

パーフェクトJavaScript勉強メモ(7)

前へ | 次へ 7章 データ処理 配列と正規表現は重要 配列 p187 順序のある要素の集まり JavaScriptの配列はオブジェクトなので、要素の追加、書き換えができる JavaScriptの配列 []で、配列要素をカンマ区切りすることで生成可能 []のみの場合、空の配列にな…

パーフェクトJavaScript勉強メモ(6)

前へ | 次へ 6章 関数とクロージャ p159 関数宣言文(function 関数名(引数リスト){})と関数リテラル式(function (引数リスト){}) 関数呼び出しの整理 メソッド呼び出し…オブジェクトから呼び出す。呼び出し元のオブジェクトの参照をthisに持つ。applyやcall…