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

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