読者です 読者をやめる 読者になる 読者になる

とある技術の開発日記

Diary of irregular phrase programmer

GitHub PagesでFacebookとはてなブログ向けにOGP画像を設定した

HTML

発端

福岡のコミュニティであるFukuoka.NET(ふくてん)のサイトはGitHub Pagesで管理しているのですが、作成したままだとOGPタグがないのでSNSでリンクを貼りつけても寂しい感じになっていたのでOGPタグを張り付けて対策しました。

OGP(Open Graph Protocol)とは

普段からFacebookとかはてなブログでURLを参照すると、画像や概要などが表示されますよね?
具体的にはこんなやつです。

Facebook

f:id:airish9:20160328101855p:plain

はてなブログ

f:id:airish9:20160328101937p:plain

これ以外ではTwitter Cardとかもあります。

dev.twitter.com

これはサイトのmetaタグにOGPを設定していると表示されます。

OGPはFacebookで作成されていて、タグの詳細は以下のサイトを見れば確認できます。

The Open Graph protocol

やり方

まずはOGPタグを貼りつけないと始まらないのでページにOGPタグを設定します。
設定する際の詳細は以下のサイトを参考にしました。

OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ! | *Web Design 覚え書き*

ふくてんのサイトで張り付けているOGPはこんな感じ

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <<中略>>
  <meta property="og:site_name" content="Fukuoka.NET(ふくてん)">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:title" content="Fukuoka.NET - ふくてん">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://fukuten.github.io/">
  <meta property="og:image" content="http://fukuten.github.io/img/ogp.jpg">
  <meta property="og:description" content="C#やVB.NETなどMicrosoftの.NETに関するコミュニティです。通称「ふくてん」。">
  <meta property="fb:app_id" content="246980395651503">
</head>

fb:app_idはイイネボタンをおかなかったりFacebookのインサイトを使わない場合は設定しなくていいです。

画像のサイズにハマった…

og:imageで画像を指定しますがサイズの指定でハマりました…。
Facebookの推奨サイズは「1200 x 630」です。推奨の最低サイズは「600 x 315」。最小サイズは「200 x 200」となっています。

詳細はFacebookのドキュメントを確認してください

Best Practices - Sharing - Documentation - Facebook for Developers

推奨サイズに従って「1200 x 630」を設定するとはてなブログで表示する際に正方形にトリミングされるので崩れます。
今回は勉強会用のページなのでコミュニティロゴが切り取られてしまうので困りました。

f:id:airish9:20160328110322p:plain

Facebookでの表示を確認するには確認用のサイトもあるので利用してみると良いかと思います。

ogimage.tsmallfield.com

この問題を解決するには「200 x 200」の最小サイズを貼っておくとFacebookとはてなブログで崩れずに表示されます。

Facebook

f:id:airish9:20160328110538p:plain

はてなブログ

f:id:airish9:20160328110554p:plain

画像を間違えた場合はFacebookにはキャッシュが残るのでDebugページからOGPのキャッシュを更新してください。

https://developers.facebook.com/tools/debug/

はてなブログの方はcdn.image.st-hatena.comドメインのCDNに保存されるのでしばらく待てば変更されます。

離職してから1年経って思った事

雑記 転職

f:id:airish9:20160327004640j:plain:w550

もう、そろそろ春ですねぇ。

桜も咲き始める季節になると、就職・転職・退職のニュースが飛び込んでくるのですが、私も前職を離職して1年経ちました。

2015年3月22日に退職エントリを書いていたのですでに1年と5日になりますw

blog.hamamotsu.jp

これから退職する人、もしくは今年の新社会人の人に少しでも参考になればと思うけどならんやろうなぁ。。。

退職してどうなった?

結局、地元の会社に就職しましたw
その時のエントリはこちら

blog.hamamotsu.jp

一人でのんびり仕事するのは自由ですが、新しい技術を使おうとしている案件に入ろうと思うと個人だと限界があると思います。
中にはスペシャルな個人の方もいると思うので例外はありますが、一般的には個人の限界はあるのかなと思います。

この辺りは各自が求める仕事の仕方が違うのでどちらにすべきだとかは無いですね。

就職してどうだった?

おかげ様で充実した1年になりましたし、無事に2016年の春を迎える事ができました!

現在の社内メンバーは4人と少数精鋭ですが、クライアントさんにも恵まれており、社内で色々と挑戦させてもらっててとても満足です。

今まで学びたい事を自分の余暇の時間を使っていたのですが、実際に仕事の中でやりたいことをできるのは凄く嬉しいですしありがたいです。
何よりも学習する時の密度が違いますし実践で使うので深く学ぶ事ができます。(ただし苦労も多いし責任もある)

転職と直接は関係ありませんが、MicrosoftのMVPを受賞する事もできました。今までは見る側の立場だったのがみられる側の立場にもなりつつあるようです。

これから

今年は学びの年になるかなと思います。

最近、IT技術の進歩はとても早くて、追いかけるのも一苦労なのですが学び続けていかねばと思ってます。

今年から福岡で.NET系のコミュニティも主催しているので、こういったコミュニティの場を上手く使って、学びたい者同士でスキルアップしていけるといいですね。

fukuten.github.io

最後に

結局何事もなるようになるかと思います。人生一度きりなんですし自分の納得のいくように生きて行けば良いのではないでしょうか。(怪しい啓蒙Blogみたいになってしまった…)

JAZUG 札幌支部第10回勉強会 ~祝!! きたあず2周年記念勉強会~ に参加&登壇してラブライブってきた

勉強会 ラブライブ

f:id:airish9:20160305134840j:plain

みなさん、こんにちは。JAZUG札幌の勉強会にお呼ばれしたので行ってきました。

札幌に行くのは3年ぶりだったので前日からwktk状態での参加でした。

概要


セッション内容

Microsoft Azureとは何者なの?

  • 登壇者
    • マツイ ミホさん

マツイさんのセッションタイトルを忘れてしまいました…。(すみません)

ご自身ではLV1の内容とおっしゃっていましたが、初心者向けのセッションでAzureのPasSが便利につかるのをマツイさん独特のトークでお話しされていたのが印象に残っています。

手書き風フォントの可愛いスライドも印象的でしたが、何よりも前半戦のほとんどがちはやふるだったのが強烈な印象を残しています。

Microsoft Azure Webアプリをいろいろなサービスに絡めてみよう

  • 登壇者

スライドはこちら

テーマは"広く浅く"Azureの色々なサービスの紹介をされていました。スライド資料を見ても解るのですが、Demo満載のセッションです。

やっぱり動いているセッションは見ていて気持ちが良いので自分のセッションでも積極的に動くものを見せるようにできたらと思っています。

デモ一発目のソリューションテンプレートのOKボタンが押せないのは面白かったですw

Web制作的にWebAppsを活かす使い方

  • 登壇者

JAZUG福岡(ふくあず)からやってきた登壇者一人目の、松本さんの発表はWebAppsの機能をご自身の使用体験と合わせながらお話しされていくセッションでした。

今回はおまけでwordpressをiphoneからインストールするネタ部分もお話しされてました。

PaaSを使い倒すためにApp Serviceのおさらいしよう

  • 登壇者

登壇時の資料はこちら

www.slideshare.net

App Service全般の解説を行いました。この勉強会の前日に、Fukuoka.NETでお話ししたAPI Appsの内容も踏まえながらの内容にしました。
思い返せばAzure成分が少し少なかったのかなと思うのでその辺りは今後の反省点としたいと思います。

とりあえず、会場で何か印象を残したかったので"ラブライブ"尽くしのセッション内容とさせていただきました。

Twitterの評判を見ているとその効果はあった模様。

荷物がかさばるのにジャージを2着持って行って良かった…。

ライブコーディングでライブライブAPI作って無事に公開できたので一安心しました。(変数名の間違い等はあったけど気にしないw)

f:id:airish9:20160311223610j:plain

本当はAzure API Appsにデプロイする部分もお見せしたかったのですが時間が足りずにタイムアップ…。(無念)

あとでアップしておいたので暇な方は是非叩いてみてください。

Azureでサードパーティサービスを活用する。SendGridを例に。

中井さんのSendGridのご紹介セッション。SendGrid使うとGmailにも届けてくれるのでホント助かります…。

メールのオプトインがなぜ大切なのかといった話や、ウォームアップが大事という話も含めて本当に勉強になります。
失敗エピソードとしてO365のアドレスでメールのテストやってたらメール止まった話とか怖いので、その辺りのエピソードをもっと聞けたらと思います。

メールは送っただけで、開かれないと意味がないので、送ったあとの追跡をできるSendGridはスゲー!と思いながら見てました。

セッション中にご紹介のあったブログ記事はこの記事ですね。

テクノオフィサーと言われるエンジニアの雑記 | AzureでSMTP立ててスパムにならないように頑張った話の補足

LT大会

LTはある程度簡略にご紹介したいと思いますw

  • Umbracoのご紹介
    • C#で実装されてるCMSで前から知っていたのですが使った事は無い。デザイナーさんにも優しい作りでDWで作ったHTMLをコピペで埋め込めるのが良いよーと懇親会で教えて頂きました。
  • AzureとAWSのネーミングセンスについて
    • Azureは検索エンジンで検索するときに検索しにくいのがツライ…と思ってます。あと、キャラが面白すぎてズルいですwそして酒飲みすぎw
  • 窓辺とおこについての紹介
    • 皆さんで窓辺とおこのTwitterを応援してOS買いましょう
  • お菓子スポンサーのセッションを含むセッション
    • 顧客「データセンター見れないの?」 A「俺もみたい」 あと、NUROはやっぱり凄い速度っすな…

その他

おやつタイムのシュークリームが美味い!

f:id:airish9:20160306163340p:plain

寿司うまーい!!

f:id:airish9:20160306163117p:plain

回転ずしのお寿司と聞いたのですが、すげー美味しい。

福岡とネタの構成が違って、うに・いくら・鮭(ハラス含む)・貝類の美味さは福岡では殆ど食べられない美味しさなので嬉しかったです。

今回の勉強会で得られたもの

  • 北海道の寿司

  • 味噌ラーメン

  • スープカレー

  • ラブライブの限定商品

f:id:airish9:20160304143538j:plain

とても満足な勉強会を含めた旅行となりましたw