Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
artboard

文字と色を指定するだけ!ファビコンジェネレーター



はい、こんにちは!僕です。
最近faviconを作る機会が多かったのですが、大抵は文字を1文字+背景透過で作ることが多くて、どうせならと思って簡単なスクリプトを書いてみました。
Google Chromeで動作を確認しています。Safariではちゃんと動作しない事を確認していますが、最初の背景色と文字色を入力する欄に、カラーコードを直接入れていただければ動かないこともないです。

どうぞ、Favicon Generatorお使いください

背景色を選択してください

文字色を選択してください

透明度を選択してください

使用したい文字を一文字だけ入力してください

左右の位置を微調整してください

上下の位置を微調整してください

↑アイコンをクリックするとダウンロード出来ます。
32px * 32pxです。

ところでfaviconって?

faviconというのは、ブラウザのタブの左上にあるアイコンのこと。
ブックマークされたりすると、このアイコンがブックマークの頭に入りますよね。
Drip'n'Snipでは、DSという感じのアイコンをfaviconにしています。

このファビコンジェネレーター、どうやって作ってる?

さて、ようやく本題です。
実はこの記事はp5.jsの記事だったのです!

p5.jsってナニ?という方はこちらをどうぞ!
p5.jsでwebページにアニメーションを作ろう - 01

このファビコンジェネレーターはp5.jsで作られています。
内容はこんな感じ。


function setup() {
    var canvas = createCanvas(32, 32,P2D);
    canvas.parent("p5Canvas");
    smooth();
}
function draw() {
    clear();
    var bgcol = color(document.getElementById("bgcol").value);
    var wordcol = document.getElementById("wordcol").value;
    var alpha = int(document.getElementById("alpha").value);
    var name = document.getElementById("name").value;
    var ypos = int(document.getElementById("ypos").value);
    var xpos = int(document.getElementById("xpos").value);

    fill(red(bgcol),green(bgcol),blue(bgcol),alpha);
    noStroke();
    rect(0,0,width,height);

    fill(wordcol);
    noStroke();
    textFont("游ゴシック",29);

    textAlign(CENTER);
    text(name,width/2 + xpos,height - 3 - ypos);
}

function mousePressed(){
    if(mouseX < width & mouseX > 0 & mouseY > 0 & mouseY < height) {
        saveCanvas("favicon", "png");
    }
}

まず最初のclear()で一旦Canvas上の全ての内容を一度消し去ります。結果、Canvasは透過された何かになります。
次に、HTML上に配置された要素の中に入力された値を document.getElementById("")によって取得します。
取得された要素の中からvalueの値をさらに取り出し、必要なものはそれをint型の値にキャストしています。
何故キャストするかというと、input要素を通じて入ってくる要素は全てString型で、そのままでは計算に使えないからです。

最後に取得した値を使って背景を塗り、文字の色を決め、文字を配置しています。

まとめ

このページをブックマークに入れて、簡単なファビコンが必要なときにお使いください。

p5.jsでもそこそこ実用的なものが作れるんだぞ!というところをお見せしたかったので書きました。
以上です!

NEXT
通販詐欺にあった記録と、通販詐欺の見分け方

  関連記事

artboard
【2016年版】ブログで収入!副業としてブログを始める基本のき。

こんにちは、僕です。 僕に別に専業ブロガーという訳ではないのですが、最近友人など ...

p5js
p5.jsでwebページにアニメーションを作ろう - 04 図形を描いて動かそう

さて、前回は最初にご紹介したコードのを解説しました。 しかし、あれだけでは、どう ...

wpdm
wordpressでファイルを配布したい時、FTPを毎回つなぐのは面倒だな…?

こんにちは、唐突ですが、Wordpressでファイルを配布したい時、ありますよね ...

p5js
p5.jsでwebページにアニメーションを作ろう - 03 自由に作れるようになろう

さてさて、前回と前々回で、とりあえず何かを作ってweb上に公開する、というところ ...

measure
Sketchを使っているデザイナ・ディレクタの皆さま必見!Sketch Mausreの本当のチカラ

[この記事はWEBデザイナもしくはWEBプロデューサ向けの記事になります。] [ ...

-p5.js, WEB開発