Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
スポンサーリンク

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

Pocket


はい、こんにちは!僕です。
最近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でもそこそこ実用的なものが作れるんだぞ!というところをお見せしたかったので書きました。
以上です!

                           

  関連記事

あのTinypngが自動でかかる!Compress JPEG & PNG imagesが便利すぎ

こんにちは、楽をするためにはどんな努力でも惜しまないタイプの僕ですが、努力が報わ ...

CSVファイルの加工を自動化したい?JavaScriptでやりましょう。

こんにちは! 今回はちょっとエンジニア向けの記事になります。 JavaScrip ...

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

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

人前で口に出来ない…そんなWordPress用アクセス解析プラグイン

その名もstatistics!!! 言いづらい。 今回は、噛むこと必至の超高機能 ...

画像素材やベクター素材、どうやって管理してますか?タグ付けしてすぐ検索出来るLingoが便利過ぎてヤバい

こんばんは、僕です。 皆さま、画像素材やsvg素材はどのように管理されていますで ...

-p5.js, WEB開発