フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

覚書

(CSS)全てのブラウザにWebフォントを対応させる

Webフォントを全てのブラウザに対応させるためには、1つのフォントに対してeot、woff、truetype の3種類の形式が必要になります。@font-familyのurl指定は4種類記述します。

(CSS)CSS animationの基本

CSSでアニメーションを表現するためのプロパティにanimationがあります。現段階(2015年10月)ではworking draftになっておりますが一応、基本的な使用方法を残しておきます。

(Javascript)Video要素をJavascriptで制御する

Html5のVideo要素はHTMLMediaElementオブジェクトとして取得できます。以下、Javascript側で操作するためのTips集です。

(Wordpress)お使いのサーバーの php では wordpress に必要な mysql 拡張を利用できないようです。

自宅環境(Windows7)にWordpressを入れようとしてはまったので、一応メモを残しておきます。ApacheにWordpressを入れて、localhost/wordpressにアクセスして、「wordpressにようこそ」の画面が出るはずだったのですが、タイトルのエラーが出てしまいました。

(Javascript)Canvasの基本 オブジェクトを回転させる

Canvasで描画したオブジェクトを回転させるには、rotateメソッドを使用しますが、少しクセがあるので、できるだけわかりやすく理解できるように残しておきます。

(Javascript)Canvasの基本 画像を表示する

canvas内に画像を読み込んで表示するためにはdrawImageメソッドを使用します。引数の数によって3パターンの描画方法を使うことができます。

(Javascript)Canvasの基本 マスクをかける

クリッピングを使用すると、canvas内にマスクを適用させることができます。クリッピングされた部分だけが表示され、それ以外の部分は非表示になります。

(Javascript)Canvasの基本 グラデーションの設定

線や面の色を指定する際に、グラデーションを指定することができます。グラデーションはCanvasGradientオブジェクトで行います。

(Javascript)Canvasの基本 文字を描画する

canvasはテキストを画像として書き出すことができます。基本的な使用方法をメモしておきます。

(Javascript)Canvasの基本 円を描画する

canvasで円を描画する場合はarcメソッドを使用して描画する円の形を指定します。fillメソッドで塗りつぶした円を、strokeメソッドで線のみを描画します。

(Javascript)Canvasの基本 線を描画する

Canvasで線を描画する方法を1つにまとめておきます。線の描画は「直線」か「曲線」の2種類の方法があります。

(Node.js)Express appオブジェクト

Node.jsでExpressを使用する際、Express関数を実行すると、appオブジェクトが戻り値として返ってきます。appオブジェクトにコンフィグやルーティング等の様々な設定を行なって、最終的にcreateServerメソッドの引数として渡します。設定はuse、set、all、get…

(Node.js)package.jsonについての覚書

Node.jsのサーバー側のディレクトリ内にpackage.jsonを用意しておくことで、色々な設定を行ったり、依存するモジュールのインストールを一括で行うことができます。

(Node.js)Serverイベント一覧

Serverオブジェクトで発生するイベントの一覧です。最新の情報はNode.js 日本ユーザグループのマニュアル&ドキュメンテーションで確認できます。

(Node.js)スタックトレースを任意の場所で表示させる

Node.jsでカスタムエラーなどを作成した場合、スタックトレースを取得することができません。console.traceメソッドを使用することで現在行われている処理を表示してくれます。

(Javascript)正規表現を使う際に知っておきたいこと

Javascriptの正規表現は通常の正規表現と、RegExpコンストラクタを使用した正規表現があります。どちらも最終的にはRegExpオブジェクトが生成されますが、両者の使い方が微妙に違い、その辺をきちんと把握していないと思った通りに機能しない場合などあるの…

(Node.js)リクエスト情報を取得するサンプル

Node.jsでリクエストの情報を取得する方法です。onメソッドでrequestイベントにコールバック関数を登録した時、引数としてRequestオブジェクトとResponseオブジェクトが入ってきます。Requestオブジェクトからデータを取得し、Responseオブジェクトでクライ…

(Javascript)オブジェクトのキー一覧を取得する Object.keys

Object.keysはObjectオブジェクトのビルトイン関数なのですが、忘れるので一応メモとして残しておきます。

(Javascript)web strage

Webページに関する情報をクライアント側で保持しておきたいにはweb storageを使用します。特別新しい技術ではありませんが、一応基本的な使い方をメモとして残しておきます。

(Mongo DB)MongoDBの基本 基本的なシェルコマンド

MongoDBはシェルから操作することができます。シェルは\mongodb\bin\mongo.exeで起動します。シェルではコマンドの他にJavascript関数が用意されているので、用途に合わせてどちらかを使用します。基本的なコマンドや関数は以下のとおりです。

(Mongo DB)MongoDBの基本 データのバックアップとリカバリ

バックアップとリカバリはシェルではなく、コマンドプロンプトから直接行います。mongodbのbinフォルダに移動して、コマンドを呼び出します。

(Mongo DB)MongoDBの基本 検索データの受け取り方法

MongoDBの検索結果を細かく指定して受け取る方法です。MongoDB起動後にコマンドプロンプトからシェルを起動して操作します。

(Mongo DB)MongoDBの基本 ドキュメントの更新

MongoDB起動後にコマンドプロンプトからシェルを起動して操作します。 データの更新はupdateメソッドで行いますが、updateメソッドはデータを引数の値と入れ替える処理なので、フィールドを個別に更新する場合はsetメソッドを使用します。updateメソッドは第…

(Mongo DB)MongoDBの基本 ドキュメントの検索

MongoDB起動後にコマンドプロンプトからシェルを起動して操作します。 ドキュメントの検索はfindメソッドを使用します。基本的な呼び出し方法はdb.collection name.find({key:value})といった形になります。引数に検索するキーワードをセットします。キーワ…

(Mongo DB)MongoDBの基本 起動~データ作成

Mongo DBの基本的な使用法です。データベースの基本構成は従来のRDBとは異なっており、JSONデータを行として保持し、JSONデータの集合体をコレクションと呼びます。各行毎に自由なJSONデータが入るため、スキーマは存在せず、列という概念も存在しませんが、…

(Mongo DB)windows7にMongoDBをインストールした時の覚書

自宅のWindows7環境にMongoDBを入れた時に色々とハマったので、今後必要になることはおそらく無いと思われるが、念の為に書き留めておきます。

(Javascript)Object.createの使いどころ

new演算子と混同されがちなObject.createなので、基本的な役割と使いどころをメモしておきます。

(Javascript)Geolocation オブジェクト

現在地情報を取得できるオブジェクトです。モバイルデバイスに限らず、PCのブラウザにも使用することが可能です。メソッドは3種類用意されています

(Javascript)HTTPXMLRequest についての覚書

Javascriptで非同期通信を行う場合の処理は、XMLHttpRequestオブジェクトを生成して、 open()メソッドで送信方法(POSTかGET)とURLを設定して、send()メソッドで送信します。

(DOM)イベントの登録 - addEventListener

スクリプト側から各ノードにイベントを登録できるaddEventListenerの使用法を自分用のメモとしてまとめておきます。

(Javascript)thisの違いについての覚書

Javascriptのthisは実行コンテキストによって定義が変わります。例外があるかもしれませんが、基本的な定義は以下のとおりなので、メモを残しておきます。

(Javascript)イベントハンドラを一括設定する場合の基本

リンクタグのonclickなどに処理を持たせる場合、document.linksで一括処理できますが、 細かい部分を忘れそうなのでその方法をメモとして残しておきます。

(DOM)HTMLノードタイプについて

DOMの定義では、htmlタグはいつくかのノードタイプに分けられます。よく使いそうなタイプを以下に記述しておきます。ノード名の左の数値はelement.nodeTypeプロパティで取得できる値です。

(DOM)要素を追加するサンプル

DOMを使って要素を追加するサンプルです。子要素を追加する関数として作成してみました。ちなみに、innerHTMLを使えば簡単なのですが、DOMの仕様に沿った場合は以下のようになるらしいので、メモとして残しておきます。

(Javascript)クライアントサイドの各オブジェクトについてのメモ

クライアントサイドJavascriptには、ブラウザを操作するためのオブジェクトが用意されています。これらのオブジェクトについて気がついたことをメモしておきます。

(Javascript) RegExpのexecメソッド

Javascriptの正規表現パターンは、varに代入した際にRegExpオブジェクトに変換されます。 テキストを検索するパターンではString.matchが代表的ですが、RegExp.execというメソッドでも検索を行うことが出来ます。String.matchとは微妙に動作が違い、用途によ…

(Javascript)アドレスの取得に関するプロパティ一覧

基本的なことなので検索すればいくらでも出てきますが、一応自分用にメモを残しておきます。 // ロケーションオブジェクトの取得 var address = window.location; // 各プロパティ var url = address.href; // URLを取得 var proto = address.protocol; // …

(Javascript)callとapplyの違い

関数内で他の関数を呼び出すことが出来ることでお馴染みのcallとapplyメソッドですが、両者の違いを一応まとめておきます。

(Javascript)protorypeを使った継承

クラスという概念がないJavascriptで、prototypeは継承的な役割を再現することが出来ます。 コンストラクタのprototypeに継承したいコンストラクタのprototypeを代入することで、他コンストラクタのメンバを継承することが出来るようになります。 参考サイト…

(Javascript)prototypeプロパティ

すべての関数は、prototypeというプロパティを内部に保持しています。 prototypeは参照値を保持するためのプロパティで、ここに定義した変数やメソッドは、インスタンスが共通で参照する値となります。

(Javascript)クロージャとは

広義でのクロージャはコードとスコープがセットになったものだそうです。 Javascriptの場合は、メソッドが自身の外にある変数を参照している関係をクロージャと言います。この場合のメソッドとは、関数の中に組み込まれる内部関数の事を指します。 通常の関…

Javascriptでのメソッド

Javascriptでは関数とメソッドは別物として明確に定義されています。 簡単に言うと、直接呼び出せるものが関数(alert()など)で、オブジェクトを介して呼び出すものがメソッド(ToString()など)ということです。

(Javascript)関数を値として持たせる(カッコ無し関数)

関数を呼び出す際、alert() のようにカッコを付けて呼び出すが、カッコなしで呼び出すことでその関数を参照させることができるようになります。

Javascript Argumentsオブジェクト(可変長引数)

Argumentsオブジェクトというのは、俗にいうargsです。 Javascriptの場合、関数で受け取る引数は厳密にチェックされません。関数を呼び出し時に送られた引数は、定義した引数より多くても少なくても、引き受けて処理が行われます。送られてきた引数は一律Arg…

(JavaScript)spliceを使った配列操作

Javascriptの配列にはspliceという汎用的な関数があります。ちょっと変わった機能なのでメモしておきます。

Javascriptのラベル文

for、for/in、while、do/whileなどのループにラベルを付けて、プログラムの流れを制御することが出来ます。 ラベルは「ラベル名:」の形で、ループ処理の前に記述します。ループ内でbreakやcontinueを組み合わせることでループを抜けたり最初に戻ったりという…

Javascriptならではのswitch文

C#やJavaなどのswitch文は、数値またはEnumなどの定数しか評価対象として使用できませんが、Javascriptでは式そのものを記述することができます。評価は式の結果を使用します。

(JavaScript)for/in文

C#のForEachに近い機能ですが、微妙に違うので使用法をメモしておきます。

Javascriptのキーワード演算子

演算子の中には、記号では表示できない特殊な演算子があります。割と使いそうなのでメモとして残しておきます。

Javascriptの等値演算子と同値演算子についてのメモ

同値演算子(===)は、型と値の両方が一致するかどうか、または同じオブジェクトを参照しているかどうかを判定するが、等値演算子(==)少し挙動が特殊なのでメモとして残しておきます。