microCMSにプリセットで入っているimgixを利用してお手軽に動的OGPを設定する
2021年9月6日(月) 14時33分9秒 | 233 view
Qiitaとかである記事のタイトルなんかをOGPに入れ込んでシェアした段階でわかりやすくなるあれです 動的OGPを作成する手続きとしてはいくつかあるんですが、大きく分けでサーバーサイドで画像を作成するもの、image CDNを利用していい感じに作ってもらうものの2種類があります。 VOXELCANVASなんかはモデル作成後にphpで画像化してimage CDNに保存して、最後にimage CDNでロゴとblendするというハイブリッドな方法をとっています。 このブログも今まで記事ページは動的OGPを噛ませていなかったので、そういえばimgixとmicroCMSがパートナーとなったことだし、もしかしたら超簡単にできるんじゃね？ってことで挑戦してみました 手順を解説します。 まず最初に動的OGPのベースとなる画像を作成してmicroCMSにアップロードします アップロードした時点でimgixの機能が使えるようになるので、テキストなんかを自由に入力できます {{image}} あとはこれをOGPとしてNuxtで設定してあげるだけです。 head (){ return { title : this.title + " | ", meta: [ { hid: 'description', name: 'description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." }, { hid: 'og:title', property: 'og:title', content: this.title + ' | 空想は世界を包み込む' }, { hid : 'og:image', property: 'og:image', content: " { hid: 'og:url', property: 'og:url', content: ' + this.$route.path + "/" }, { hid: 'og:description', property: 'og:description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." }, ] } } 以上で動的OGPが設定できます。 imgix周りの環境構築をすべてmicroCMSがやってくれるのでとても楽でした。 今回は1行で実現したので楽でしたが複数行にする場合は少しややこしくなるようです。 →対応したので追記しました また、このブログでも何回か紹介しているimagekit.ioでは選べるフォントが少なめなのでまだimgixのほうが良さそうです。 2022/08/10追記：複数行に対応しました blendで複数行もワンラインでできることに気づき、対応しました。 {{imagemul}} og:imageを以下のように変更しています。 { hid : 'og:image', property: 'og:image', content: "
phpを使ってimagekit.ioにREST API経由でbase64形式の画像をアップロードする
2021年1月15日(金) 7時46分53秒 | 232 view
はまったので忘備録 公式によると以下curlコマンドで画像アップができます。 curl -X POST " \ -u your_private_api_key: \ -F 'file=iVBORw0KGgoAAAAN' \ -F 'fileName=hoge.png' PHPで書き直すと以下のようになります $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", ); $curl=curl_init(" curl_setopt($curl,CURLOPT_POST, TRUE); curl_setopt($curl, CURLOPT_POSTFIELDS, $POST_DATA); curl_setopt($curl,CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl,CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($curl,CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($curl, CURLOPT_USERPWD, $imagekit_privatekey.":"); curl_setopt($curl,CURLOPT_COOKIEJAR, 'cookie'); curl_setopt($curl,CURLOPT_COOKIEFILE, 'tmp'); curl_setopt($curl,CURLOPT_FOLLOWLOCATION, TRUE); $output= curl_exec($curl);crulの-uコマンドになじみがなくてよくわからなかったのですがどうやらこれはbasic認証らしいです。 phpのcurlでbasic認証を通す場合はcurl_setopt($curl, CURLOPT_USERPWD, $imagekit_privatekey.":");のように記述します またこの記事同様デフォルトでランダム文字列が入ってしまうのですが、外す場合にはuseUniqueFileNameをfalseにする必要があります ただ、今回はmultipart/form-dataでの送信のため、http-build-queryなどを通さず、直接送信しているため $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", 'useUniqueFileName' => false );とすると、正しく動作しません。 正確には $POST_DATA = array( 'file' => 'iVBORw0KGgoAAAAN', 'fileName' => "hoge.png", 'useUniqueFileName' => 'false' );と文字列リテラルで渡す必要があります。 これで正しくアップロードできます
imagekit.ioで画像をアップロードしたときにランダム文字列が末尾につかないようにする
2021年1月15日(金) 4時24分0秒 | 47 view
imagekit.ioでは上書き防止のためにデフォルトではアップロード後に画像の末尾にランダム文字列が付与されるようになっています。 これを削除するには以下の方法から設定を変更します。 Image settingsからMEDIA LIBRARYを選択 >ENSURE UNIQUE IMAGE NAMES DURING UPLOAD をfalseにするとランダム文字列がつかなくなります
