アイデアマンズ株式会社のロゴマークを生成するサーバサイドプログラムです。

ロゴマークは、ポリゴン調のパターンを生成するライブラリTrianglifyを利用し、任意のフレーズを指定することで無数に変化するロゴを再現することができます。

• ウェブサイトには日付を渡し日替わりのロゴを表示
• 名刺には名前を指定し社員固有のロゴを表示
• イベントなどでの掲載はそのイベント名などを指定

さまざまなソフトウェアやWebサービスを開発する会社として、アルゴリズムによりひとつに留まらず変化するCIを掲げるため、このプログラムを開発しました。

構成技術

• Node.js
• Express
• Trianglify
• SVG2PNG

構成ファイル

• package.json プロジェクト情報や依存関係を記録
• index.js プログラム本体
• template/logos.yml テンプレートとなるSVGファイルの付帯情報
• template/*.svg ロゴのタイプによるテンプレート

開発手順

このプロジェクトはyarnにより依存関係を管理します。npm install yarnによりインストールします。

初回だけ、依存関係をインストールします。

yarn install

次のスクリプト

node index.js

または

yarn start

を実行すると、http://localhost:3000/square.svgなどでアクセスできます。

yarn debug

を実行すると、index.jsの変化に応じてExpressサーバが再起動するデバッグに適した環境を利用することができます。

使い方

http://localhost:3000/(type).(format)[?(OPTIONS)]

によりロゴマークを生成することができます。?(OPTIONS)は任意です。

• type ロゴマークのタイプ。次項参照。テンプレートの追加により増やすことができます。
• format 出力フォーマット。svgまたはpngを指定できます。
• width 横幅(ピクセル単位)。
• height 縦幅(ピクセル単位)。widthとheightは併用できません(両方指定された場合は、widthが優先されます)。
• phrase ロゴマークを変化させる任意のフレーズ。UTF8によりURLエンコードします。

ロゴマークタイプ

• line 1行タイプのロゴ
• square 正方形タイプのロゴ
• ogp OGP画像比率のロゴ
• screen169 16:9のスクリーン背景
• screen43 4:3のスクリーン背景
• linejp 1行タイプの日本語ロゴ(試作)
• squarejp 正方形タイプの日本語ロゴ(試作)
• ogpjp OGP画像比率のロゴ(試作)

例

# 横幅400pxの横長タイプのロゴをpng形式で生成。フレーズはlogo
http://localhost:3000/line.png?width=400&phrase=logo

ロゴマークテンプレート

1. Illustrator等で生成します。Trianglifyにより生成されたロゴマークを適用する要素にはlogo-markというIDを付与します。
2. template/logos.ymlにロゴマーク全体のサイズと、ロゴマーク要素のサイズと位置を指定します。