読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

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

さくらインターネットで.htaccessを使ったリダイレクト

Web

さくらインターネットのスタンダードプランのレンタルサーバーで以下をやった時のメモです。 独自ドメインのトップへのアクセスは、WordPressのブログへリダイレクト 独自ドメインの実在しないディレクトリやファイルへのアクセスは、httpsに変更してさくら…

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 策定中の…

PHPで簡単にPOSTする

PHPUnitのテストなどで、手っ取り早くPOSTする時の関数。PHPの公式ページのサンプルなどを参考にしました。PHP: file_get_contents - Manual

PHP DOMDocumentのloadHTML() ShiftJISでエラー

①などの文字が含まれるHTMLページをDOMDocumentのloadHTML()でDOMにしようとしたところ、以下のようなエラーが発生してしまいました。 DOMDocument::loadHTML(): input conversion failed due to input error, bytes 0x81 0xAE 0xE3 0x81 やりたいことは、Sh…

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

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

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

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

ReactでBootstrapのProgressBarを利用する

(メモのため、要点しか書いてません。)ReactでBootstrapのProgressBarを使って、ファイルの読み込み状況を表示しようとしたところ、バーが全然伸びない症状が発生しました。 原因 ファイルの読み込みなどの重い処理を実行中は、BootstrapのProgressBarのアニ…

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

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

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

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

Unityの作品をGitHub Pagesで公開する

Unityの作品を気軽に配信するには、Webブラウザ上で実行できるようにして、ホームページで配信するのがよいでしょう。ここでは、GitHub Pages上でUnityの作品を公開する手順を紹介します。 公開する際の注意 うっかり守らなかったらどうなるのか UnityでWeb…

macのapacheが接続できなくなった時の対処

以前、SSL関連のエラーが気になって直そうとして失敗していたのが原因でした。/private/var/log/apache2/error_log を確認すると、以下のようなエラーが発生していました。 [Mon Aug 31 16:28:02.028682 2015] [ssl:emerg] [pid 2341] AH02562: Failed to co…

GulpとBrowserSyncでreloadが動作しない

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

mac OS X10.10 で gulp watchify が動かない

突然、gulp の watch タスクが動かなくなりました。原因は、該当フォルダーのSpotlightの設定が壊れていたことでした。 チェック方法 同様の症状かを確認するには、以下を行います。 Finderで、監視するJavaScriptなどが入っているフォルダーを開く ターミナ…

Yeomanのmacへの導入とチュートリアル

Yeoman(ヨーマン) 公式ページ: http://yeoman.io/Webアプリを開発する際に、利用したいライブラリを開発用フォルダー内に展開して、ビルドやテストの環境なども構築してくれるサービス。標準的なプロジェクトフォルダーの構築などを自動的に行ってくれるの…

Bootstrapの概要の概要

ざっくりとどういうものかの覚え書き。Bootstrap 3.0入門 (全18回) - プログラミングならドットインストール ←具体的な内容についてはこちらへ。その後、使う場合は公式ページにサンプルなど揃ってます。Bootstrap · The world's most popular mobile-first …

SASSのメモ

参考 フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus) p73 SASSの公式サイト Sass: Syntactically Awesome Style Sheets @IT 爆捗! WordPressテーマ作成ショートカット(3):CSSコ…

CSS関連のメモ

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章出版社/メーカー: 技術評論社発売日: 20…

MongoDBをMacにインストール

インストール ダウンロードとインストール Install MongoDB on OS X — MongoDB Manual 3.0.1 を参照して、以下をターミナルで入力 brew update brew install mongodb --with-openssl しばらく待つと、インストールが終わる フォルダ作成 MongoDBを起動する前…

書籍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 勉強し…

BackboneJS

BackboneJS概要 技術評論社. フロントエンジニア養成読本 Web環境の変化に耐えるJavaScriptの設計と指針 p83-84より マナーを守るためのベースを提供 短期的な生産性の向上やコードの縮小はない 中・長期的な生産性や保守性の向上 MVC、イベントシステム、ル…

パーフェクト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…

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

前へ | 次へ 5章 変数とオブジェクト 変数の宣言 p109 変数が宣言されていなければ初期値を代入するイディオム var a = a || 7; ||は4章でやった論理演算子。左のオペランドがtrueの時は左のイディオム、つまりaにもともと入っていた値が代入され、falseの時…

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

前へ | 次へ 4章 文、式、演算子 予約語 p70,71 予約語一覧。将来の予約語を見るとclassやextendsなどがある 識別子 p71 変数名や関数名など、何かを指定するための単語 単語の長さの制限はない Unicodeの単語なので、日本語を使うことは可能だが推奨しない …

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

前へ | 次へ 3章 JavaScriptの型 p39 JavaScriptの変数に型はないが、値やオブジェクトには型がある 基本型は以下の5つ 文字列型 数値型 ブーリアン型 null型 undefined型 上記以外はオブジェクト型 p40 基本型変数と参照型変数がある 基本型変数は、値がそ…

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

前へ | 次へ 2章 JavaScript言語仕様 コアの言語仕様。 p25 プロトタイプベースのオブジェクト指向言語(補足:ECMA Script6ではクラスの実装が検討されている) p25 プログラム例はsmjs(SpiderMonkeyのシェル)で実行確認。ECMA Script5+JavaScript1.8.5 p26 …

パーフェクトJavaScript勉強メモ

次へ以下の書籍の備忘録。パーフェクトJavaScript (PERFECT SERIES 4)作者: 井上誠一郎,土江拓郎,浜辺将太出版社/メーカー: 技術評論社発売日: 2011/09/23メディア: 大型本購入: 24人 クリック: 588回この商品を含むブログ (12件) を見る 1章 JavaScriptの歴…

OS X 10.11でApache、PHP、MySQL、SSLを動かす

OS X 10.10から10.11にアップした時も、apacheの設定がリセットされるため、以下の作業が必要。前提として、以下でOS X 10.9の環境がセットアップされていたものとする。OS X 10.9にApache+PHP+MySQLをインストール - tanaka's Programming Memo httpd.conf …

Google Earth作業メモ

ルートや写真を公開してよい場合は、散歩リンクを誰でも使えるようにしたい。データのホストを外部サーバにしたく、データの形式をKML方式で検討している。 ルートと写真を持っているKMLファイルの形式を確認 初期設定 Google Earthをインストール Googleア…

Googleアナリティクスを使う

教科書は今回もこちらのp164-168。WordPress Perfect GuideBook 3.x対応版作者: 佐々木恵出版社/メーカー: ソーテック社発売日: 2014/01/22メディア: 単行本(ソフトカバー)この商品を含むブログ (2件) を見る散歩リンクのアクセス解析にGoogleアナリティク…

さくらインターネットでのファイル内からの文字列検索

サーバ上にある日本語のファイルを読み込んで、一部の文字列を切り出す処理が、ローカル環境では動作したが、さくらインターネットにアップしたところ動作しなかった。原因はエンコードの指定が不十分だったこと。ローカルで動作したため、mb_language()とmb…