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
通販詐欺にあった記録と、通販詐欺の見分け方

  関連記事

esa-io
【動画あり】esa.io!Markdownが使えて、共有が出来る!日本が産んだゆるふわwebサービス

こんにちは、僕です。 これまでもQuiverやConfluenceなど、Mark ...

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

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

docker
WordPress環境をローカルで、超簡単に構築!Docker for mac

こんにちは、今回はWordpressを使って業務をしている方、もしくは趣味でpl ...

artboard
最近良く聞くCDNって何…?XSERVEの「mod_pagespeed」とどちらが効果的?

こんにちは、rebuild.fmに癒やしを求める日々の僕です。 ところで、CDN ...

artboard
【2016年版】レンタルサーバ3選!/個人でブログを始めるなら?【初心者必見】

さて、前回副業としてブログを始めるにはどうしたらよいか、という記事を書きました。 ...

-p5.js, WEB開発