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

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

(xampp) MariaDB の文字コードをUTF-8にする

2015年11月にxamppをインストールしたら、DBがMySqlからMariaDBになっていました。文字コードをUTF-8にする手順が、少し変わったようなので、自分がやった方法をメモとして残しておきます。 現在の設定を確認する コンソールからxamppのmysql(\xampp\mysql\…

(CSS)画像を立体的に回転させる

カードがくるくると回転するようにアニメーションさせるCSSです。奥行きを持った変形を行うtransformプロパティを、animationと組み合わせることで簡単に実装できますが、あまり使うことがなさそうなのでメモとして残しておきます。

(CSS)フォントファイルを変換してくれるサイト

Webフォントを全てのブラウザに対応させるためには3~4種類の形式のファイルを用意する必要がありますが、fontsquirrel.com の WEBFONT GENERATORというWebサービスを使用すると、1つのWebフォントファイルから eot、woff、woff2、ttf、svg の5種類のフォント…

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

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

(Javascript)Style要素を動的に扱う

htmlのheadタグ内に記述したstyleをJavascriptで操作するためのTipsです。

(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上に、2点をつなげた直線を描画する際、その角度を取得するためのTipsです。 x座標はMath.cos(ラジアン)×距離y座標はMath.sin(ラジアン)×距離 で取得できます。

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

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

Canvas上で、ベジェ曲線に沿ってオブジェクトを動かすための機能を作ってみた

BezierCurveObjectという名前のオブジェクトを作成しました。3次ベジェ曲線を描画するために必要な引数をつかってインスタンス化します。結果のみ言いますと、実際に何かを動かすのではなく、動かすために必要な座標や角度を取得することができるオブジェク…

(Jacascript)文字のフォーマットを行う関数

JavascriptにはCのprintfや、C#のString.format関数などのように、%dや%s等のプレースホルダを使用して文字の置き換えを行う機能を持つ関数が用意されていないようで、とりあえず自作で用意してみました。今後も使えそうなので一応、Tipsとして残しておきま…

(Javascript)オブジェクトの複製

Javascriptの代入(=)は独特の癖があって、リテラルは値のコピーを行い行うように振る舞い、オブジェクトは参照値のコピーを行います。なので代入を使ってコピーした場合、コピー先の内容を変えると、コピー元に反映されてしまいます。

(Javascript)Canvasで角度と距離から座標を出す。

座標0,0(左上)を基準にして、特定の角度に向かって、特定の距離を進んだ際の座標を求める方法です。

(Javascript)簡単にクロージャを実装する

サイ本などで紹介されているクロージャは、関数内部に変数を定義して、メソッドを使用して変数にアクセスする方法を行っておりますが、変数を定義せずに、メソッドから引数に直接アクセスすれば、簡単にクロージャを実装することができます。

(Javascript)Canvas内の2つの座標の距離を求める

canvasで何かを描画する際に、2つの座標の距離が必要になる場合があります。2点の距離を求めるサンプルをメモしておきます。

(Javascript)Canvasの基本 canvasのコピー

画像のトリミングと同じ方法でcanvasのコピーを行うことができます。drawImageメソッドのソースとして、canvasオブジェクトを渡してあげれば、コピーの対象として扱えるようになります。

(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種類の方法があります。

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

描画の基本です。句形だけでも色々とプロパティがあるので、一応まとめてメモしておきます。

(Javascript)Canvasの基本 2次元のcanvasを作成する

基本中の基本です。Html内にcanvasを作成して、描画をするための方法をメモしておきます。

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

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

(Node.js)Node.jsでjsonファイルを読み込む

とある書籍で、サイトのコンフィグをjsonで用意して管理するという方法を紹介していたので、その方法をメモとして残しておきます。

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

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

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

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

(Node.js)Express 4 のスケルトンコード作成(windows)

Express3から4にバージョンアップされた際に、細かい部分が結構変更されていたようです。ググってもなかなか情報が見つからず、自己解決したので一連の流れを残しておきます。

(Node.js)MongoDBを使用するための基本

Node.jsでMongoDBを使用するために必要な基本事項を残しておきます。

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

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

ソースコードに自動でhtmlタグ(とCSSクラス)を割り当てるスクリプト その2

以前作成したスクリプトの不具合等を修正してjQueryモジュールにしてみました。せっかくなので今回はGitHubを使ってファイルを管理してみました。ただ、はてなの無料アカウントではjQueryモジュールを使えないようなので、DOMのみで機能するバージョンも作成…

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

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

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

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

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

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

(Node.js)モジュール呼び出し時のパスについて

Node.jsで自作モジュールを呼び出す場合は、パスが必要だったりする場合とそうでない場合がありますが、その違いについてメモしておきます。

(Node.js)EventEmitterでイベントを登録する。

JavascriptではaddEventListenerでイベントの登録を行いますが、Node.jsではEventEmitterオブジェクトを使用してイベントの管理を行います。 基本は、onで登録、emitで発生です。

Visual Studio Code を使ってみた

Visual Studio Code(以下、VSCode)というエディタが最近リリースされたようです。Electonというフレームワークをベースにしたエディタという事で、デバッグ機能やインテリセンス、Gitとの連携も標準で用意されているようです。対応する言語も非常に多く、H…

(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)キーボードで押したキーを取得する

リアルタイムで押されたキーを取得する場合は、onkeydownかonkeyupのイベントを利用します。自動で入ってくる引数にkeyCodeというプロパティがあり、そこでキー番号(ASCIIコード10進数)を見ることができます。 以下のサンプルは、押されたキーの番号がコン…

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

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

(Javascript)Geolocation オブジェクト

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