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

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の使用法を自分用のメモとしてまとめておきます。