コメントをするTweetPocket文字ジェネレーターって面白いですよね。文字を入力するだけで魅力的な文字デザインを自動で生成してくれるので、使うだけでテンションが上がります。そんな事でテンションが上がるのは僕だけかしれませんが、今日は文字ジェネレーターを「イラストレーター」+「Bootstrap4」+「JavaScript」で簡単に作成する方法を解説します。上記のタイトルロゴをイラストレーターで作成し、SVGコードを取得していきます。新規ドキュメントを作成する任意の「幅」「高さ」を設定します。ここではTwitterの画像サイズ「幅」506px、「高さ」253pxを指定しました。長方形ツールで黒枠を設定する長方形ツールを選択しアートボードと同じ幅(506px)と高さ(253px)に設定。文字ツールでテキストを設定する文字ツールを使用しテキストを設定します。テキストは「文字の生成」にしました。JP」でフォントスタイルを「Heavy」、フォントサイズを「90pt」に設定。文字を装飾する「生成」の文字を選択して塗りを「レッド」に設定します。SVGコードを取得する別名で保存を選択するファイル形式に「SVG」を選択するファイル形式を「SVG」にして、「保存」をクリックします。SVGコードを表示する以下のSVGコードが表示されますここまでがイラストレーター設定となります。svgBase64;});</script></body></html>※上記コードの@font-faceで指定しているsrcにはbase64にエンコードしたデータの一部しか含まれていません。crossorigin="anonymous"></head>CDN(コンテンツデリバリーネットワーク)を利用してBootstrap4を読み込みます。network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。</div></nav>bootstrap4のナビゲーションバーを使用してヘッダー情報を定義します。ナビゲーションバーについては以下のサイトで詳しく説明しています。※5行目でタイトルを表示しています。中央にタイトルを表示するため少し特殊なやり方で実装しています。</div></div>divタグを入れ子にして、class属性に「container」クラス、「row」クラス、「col-12」クラスを指定します。--></div>上記のdiv要素内にSVG情報、テキスト入力欄、画像取得ボタンを設置します。</svg></div>上記1行目のdivタグを追加し、イラストレーターで生成したSVGを挿入します。height="253">上記SVGタグのidを「svg-generator」に変更し、以下のwidth、height属性を追加します。{font-family:SourceHanSansJP-Heavy-83pv-RKSJ-H;src:url("data:application/x-font-woff;base64,d09GRk9UVE8AEp4wAAkAAAAY...")}源ノ角ゴシックのフォントを利用するために@font-face規則を追加します。※SVG内でWEBフォントを使用している場合の注意点SVG要素をPNGなどの画像に変換する場合、srcプロパティに通常のURL形式で指定しているとWEBフォントが反映されません。WEBフォントを正しく反映するためにはbase64にエンコードしDataURI形式でsrcプロパティに指定する必要があります。base64に変換した源ノ角ゴシックのフォントデータが必要な場合は以下よりソースを表示してコピーしてください。実装した文字ジェネレーターのサンプル以下はフォントをbase64にエンコードする方法です。id="text-2">生成</tspan></text>「text」タグ内の2つの「tspan」タグにid属性を追加します。入力したテキスト内容をsvgに反映する際に、ここで設定した「id」が必要になります。</div></div>各divタグ、inputタグに上記のbootstrapクラスを設定します。上記の2行目、6行目のdivクラスに「col-sm-6」を指定しテキストを横並びに表示します。inputタグに「data-target」属性を追加し、値には「svg」の「tspan」タグに追加したidを設定します。id="create-image">画像を取得</button></div>divタグ、buttonタグのclass属性に上記のbootstrapクラスを設定します。id属性の値を「create-image」にします。href="/">文字ジェネレーター</a></footer>BootStrapのモーダルダイアログ要素を設置します。・「fixed-bottom」クラスを指定し画面下部に固定表示させます。・aタグでトップページにリンクを張ります。</div></div>BootStrapのモーダルダイアログ要素を設置します。id="svg-box">id属性の値を「svg-box」にします。style="width:100%;">imgタグを追加しidを「svg-image」にします。このタグにsvg要素を変換した画像を表示します。crossorigin="anonymous"></script>jQuery・Bootstrap4のjavascriptの読み込みを宣言します。$(targetTspan).text($(this).val());});テキスト入力時に発生するイベントをjQueryで取得しています。svgBase64;})画像取得ボタンクリック時に発生するイベントをjQueryで取得しています。処理内容SVG要素をbase64にエンコードするCanvasオブジェクトを作成し、Base64にエンコードしたSVG画像を描画するCanvasに描画された画像をPNG画像に変換し、Bootstrapのモーダルダイアログに画像を表示する以上が作成した文字ジェネレーターのイラストレーターとHTMLファイルのソース解説となります。ジェネレーターを作りたい方にこの記事が何か参考になれば幸いです。ジェネレーターを作成して公開した場合はコメントやTwitterなどで連絡をいただけるととても嬉しいです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索対象:検索プロフィールハクトスポーツ好き、1970年代生まれのWEBエンジニアです。楽しくサイト作りをモットーに作成したミニアプリやプログラミング、身体の動かし方に関する情報を発信しています。