JavaScript | hgrs's Blog / 文字好きエンジニアの技術メモ Sat, 18 May 2019 21:08:02 +0000 ja hourly 1 https://wordpress.org/?v=6.3.1 /wp-content/uploads/2019/05/cropped-port_512-32x32.png JavaScript | hgrs's Blog / 32 32 WordPressの記事上にアイキャッチをJavaScriptで自動挿入する /archives/207.html /archives/207.html#respond Sun, 19 May 2019 01:12:35 +0000 /?p=207 はじめに

僕の使ってるテーマNishikiでは投稿ページにアイキャッチが表示されません。なので記事の上にアイキャッチが表示されるように変更してみました、JavaScriptで。PHPじゃなくて、JavaScriptで。

なんでJavaScript？

WordPressといえばPHPですよね。確かに、アイキャッチの追加はテーマのPHPをいじれば追加することができます。

でも僕はまだブログを始めたばかりで、今後テーマを変えてしまうかもしれないので、あまりテーマに依存した書き方をしたくなかったのです。

そのため、別の方法で追加する必要がありました。そこで記事の上下にHTMLを挿入できるプラグインを使用して実現しました。

HTMLが書けるということは<script></script>タグを利用してJavaScriptが書けます。なのでJavaScriptで実現しています。

事前準備

記事の上下にHTMLを追加するプラグインを入れます。

PRyC WP: Add custom content to post and page (top/bottom)

追加コードの記入

プラグインの設定から記事上のコードに以下のコードを書き加えます（操作は図を参照）。

注意点としては、一行目の<img>タグのsrcは自分の好きな読み込み中の画像を設定しましょう。

<img name="top_ogp_image" src="https://example.com/path/to/loading.png">
<script type="text/javascript">
    var metas = document.head.children;
    for(var i=0; i<metas.length; i++){
        var property = metas[i].getAttribute('property');
        if(property === 'og:image'){
            var imagePath = metas[i].getAttribute('content');
            document.top_ogp_image.src = imagePath;
        }
    }
</script>

JavaScriptのアイキャッチ

仕組みの解説

JavaScriptからDOMを使用し、<meata>タグに設定されているOGP画像を読み取ってきます。

ただ特定の<meta>タグを一発で取ってくることができないため、まずdocument.head.childrenを利用し、<head></head>の全ての子要素を取ってきます。そこからOGP画像（propertyがog:imageになっているもの）を抜き出します。

そしてOGP画像で読み込んでいる画像をあらかじめ用意した<img>タグのsrcとして割り当てます。

こうすることで、JavaScriptを使ってアイキャッチ画像の自動挿入を実現できます。

メリット

テーマに依存しない

さっきも書きましたね。テーマを変えたりした時にわざわざ移行の必要がありません。単純に記事上下にHTMLを書き加えるプラグインなのでカスタマイズ性も高いです。

一括管理ができる

例えば「やっぱりアイキャッチ消そ」「表示サイズ/場所を変えよ」といったことが一括で操作できます。まあ、これはPHPでも同じですが…

ただ、このプラグインではIDを指定することで特定の記事には表示しないといった指定ができるのは良い点ですね。

デメリット

読み込みが発生する

JavaScriptで書いているので、クライアントサイド（ブラウザ）で画像の割り当てが実行されます。そのため、サーバサイドのPHPと違って、ページを読み込んだ後に画像を探すので、タイムラグが生じます。このタイムラグが画像読み込みの遅延の原因です。

おわりに

ちょっと特殊な方法でアイキャッチを指定しましたが、自由度が高いので良いですね。いつ表示を消すかわかりませんが笑。

ほんとはPHPが嫌いなので書きたくなかっただけ。

]]> /archives/207.html/feed 0 【全4種類】ロゴジェネレーターの紹介 /archives/57.html /archives/57.html#respond Fri, 10 May 2019 14:48:55 +0000 /?p=57 はじめに

アニメのロゴを手軽に再現できるロゴジェネレーターを作ったので紹介します。

ロゴジェネレーター一覧

女子高生の無駄づかい

「女子高生の無駄づかい」ロゴジェネレーター
https://logo.hgrs.me/jyoshimuda.html

かぐや様は告らせたい

「かぐや様は告らせたい」ロゴジェネレーター
https://logo.hgrs.me/kaguya.html

幼女戦記

「幼女戦記」ロゴジェネレーター
https://logo.hgrs.me/youjosenki.html

妖狐×僕SS

「妖狐×僕SS」ロゴジェネレーター
https://logo.hgrs.me/inuboku.html

使われてる技術について

HTMLのCanvasをJavaScriptでこねくり回して作っています。

Canvas/JavaScriptを使うことでサーバーサイドで処理する必要がなく、ユーザ側で逐次確認できて、ロゴが作りやすい（と僕は思ってる）です。レスポンシブデザインなので、スマホでもある程度綺麗に見えると思います。

一応ツイート機能がついていて、そこからツイートすると、サーバサイドに一回画像を渡して、保存する過程を通るので、作成したロゴがOGP画像としてシェアできるリンクが作成されます。最近OGP画像のサービスが流行ってるのでこの機能をつけました。そのため、全てのロゴはOGP画像向けの固定サイズとなっています。

おわりに

暇があればどんどん種類が追加されていきますのでお楽しみに。

]]> /archives/57.html/feed 0