tanaka's Programming Memo

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

JavaScript

CesiumをWebpackでビルドできるようにする

Cesiumとは、Google Earthと同様に3Dで地図をWebブラウザー上に描画するJavaScriptライブラリーです。WebpackでWebアプリとしてビルドできる様にするための手順が公式サイトにあったので、あちこち端折りながらまとめます。 目次 目次 前提環境 基本的なWebp…

WebpackでSass+Codeception+Seleniumの環境を作る

簡単なJavaScriptのプログラムを作る時の雛形プロジェクトを作ったのですが、Sassの組み込みで苦戦したので、備忘録として設定ファイルなどについて残しておきます。 2017/11/3 index.htmlのテンプレートをsrcフォルダーに入れて、html-webpack-pluginでdist…

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 を参照