Laravel を Docker で動かしてホスティングするまで

2023/10/06 20 users Docker Laravel コンテナ PHP アドバイス

ひょんとしたことから PHP をやることになったのですが、Laravel を コンテナでホスティングするのが難しすぎて困っています。とりあえず今できていることをメモです。こうした方が良いよ的なアドバイスがあったら教えて欲しいです。 ちなみに本当は昨日公開予定のブログでしたが、Xが急遽OGPに対する仕様を変えたのでそ... 続きを読む

WebRTC と React を組み合わせるなら Flux 設計が有効

2023/06/12 100 users Flux WebRTC React 反響 答え

この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。... 続きを読む

zod ではなく ajv を使っている話

2023/04/21 13 users Zod Encraft スキーマ 焼肉 たくさん

encraft #2 までの間、スキーマスキーマした話をたくさん書きたい。好き好きスキーマと言いたいところだが、zod に対しては人気に対して逆張り意見的なのを持っているのでそれを書いていきたい。 OGP は Ajv ユーザーと焼肉をしたときの画像だ。網もスキーマが大事ってことですね。 独自性の高いスキーマを使うのは危険... 続きを読む

Cloudflare Workers で画像生成

2022/10/18 6 users Cloudflare Workers fork 画像生成

どうも、 uzimaru です。 最近、Vercel が @vercel/og という package をリリースしました。 これは、Vercel Edge Functions で OGP 画像を生成するための package です。 Vercel はすでに vercel/og-image というリポジトリを公開しており、それを Fork して画像生成をしていた人も多いと思います。（自分もやってまし... 続きを読む

レシピページのOGP画像を動的に生成する - クックパッド開発者ブログ

2022/02/17 21 users OGP画像 iOS morishin レシピページ 基盤

こんにちは、クックパッドでエンジニアをやっている @morishin です。入社してわりと長い間 iOS アプリやそのバックエンドの開発を中心にやってきましたが、最近は専らウェブフロントエンドとその基盤をいい感じにするというのをやっています。先日クックパッドウェブサイトのレシピページの OGP 画像を素敵に刷新したの... 続きを読む

サイトのOGP画像を自動生成する

2022/02/02 10 users OGP画像 自動生成 略語 パンダ 念願

最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツ... 続きを読む

2021年版：WebサイトのOGPの正しい設定方法まとめ。画像サイズや確認方法も | Web Design Trends

2021/08/16 7 users 流入 機会損失 Web Design Trends SNS

OGPは、WebサイトのSNSからの流入を増やすためには欠かせない存在ですが、意外とWebサイト公開時に忘れがちになってしまいます。 OGPの設定を正しく行わないと、せっかくSNSでシェアされてもアクセス数が伸びず、大きな機会損失に繋がってしまう可能性があり、注意が必要です。 今回は、WebサイトにおけるOGPの正しい設... 続きを読む

CloudFront+S3なSPAにLambda@EdgeでOGP対応する | DevelopersIO

2021/07/25 10 users DevelopersIO Lambda@Edge bot

吉川@広島です。 案件でCloudFront+S3なSPAに対してOGP対応が必要になってきそうなため、Lambda@Edgeを使った対応について検証しました。 現状、FacebookやTwitterのBotは基本的にクライアントサイドJSを解釈できず、SPA単体でのOGP対応は難しいとされています。OGPメタタグはSSRで返してあげる必要があるため、「UserAg... 続きを読む

月500円の不労所得を得るためにWEBサービスを開発した話 - Crieit

2019/03/12 89 users Crieit ミツダマ 不労所得 ノウハウ 祭り

こんにちわ！ミツダマです。 毎月WEBサービスを開発して技術とノウハウうっはうは祭りを主催しています。 1月に続いて2月にもWEBサービスを開発したことで、真の狙いである「不労所得を生み出すサービス」作りにも近づいてきました。 ちなみに俳句メーカーといいます。 以下報告記事です。 SNS画像シェア(OGP)系サービス... 続きを読む

head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス

2018/11/12 42 users コリス デバッガー Facebook Meta metaタグ

head内のmetaに記述するTwitterカードやFacebookのOGPなどのソーシャルメディア用のコード、Googleなどの検索エンジン用のコードを簡単に作成できる無料のオンラインツールを紹介します。 公式のデバッガーですぐに確認もできるので、非常に便利です。 Meta Tags Meta Tagsでは、下記のソーシャルメディア・検索エンジン... 続きを読む

ちょっと前のことですが、「出版社のWebサイトもソーシャルボタンとかOGPの設定とか、しっかりやんなよ」という趣旨のツイートを見かけてですね。なんつうか、色々と思いました。｜高島

2018/06/22 37 users 高島 趣旨 用語 ソーシャルボタン ツイート

ちょっと前のことですが、「出版社のWebサイトもソーシャルボタンとかOGPの設定とか、しっかりやんなよ」という趣旨のツイートを見かけてですね。なんつうか、色々と思いました。 予めお断りしておきますが、今回は用語の解説とかは無しです。理由は最後のほうで述べます。 まず、出版社の皆さんにお伺いしたい。自社のW... 続きを読む

アイキャッチ画像（OGP）チェッカー｜TwitterやFacebookでの表示を確認

2017/07/25 88 users Twitter Facebook チェッカー 文字 一部

TwitterやFacebookでシェアされたときに、アイキャッチ画像がどう表示されるのかをまとめてチェックできるツールです。「文字がはみ出てしまわないか」「意図せず一部が切れてしまわないか」などを確認するためにご活用ください（表示は2017年7月時点のものです）。 画像を選択 続きを読む

CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール | コリス

2017/05/30 448 users Facebook コリス Mic CSS スニペット

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmic ...記事の続きを読む 続きを読む

Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス | コリス

2015/07/01 587 users コリス metaタグ シャドウ CSS グラデーション

CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオン...記事の続きを読む 続きを読む

【2015年最新版】FacebookのOGP設定がわかるサイト6選＋1｜Ferret [フェレット]

2015/02/06 217 users Twitter Facebook 柿崎 フェレット サムネイル

Ferretエンジニアの柿崎です。 ホームページ担当者の皆様、運営しているホームページのOGP設定をおこなっていますか？ OGPとは「Open Graph protocol」の略称です。FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人... 続きを読む

ブログ記事やサイトを紹介するのに「はてなブログ ブログカード」がかなり都合がいいかもしれない*prasm

2014/11/13 29 users prasm ブックマークレット化 タイトル Webページ 画像

はてなブログ ブログカードってどういうの？ 見てもらったほうが早いと思うので、 はてなブログ ブログカードをブックマークレット化してみたよ こういう奴↑です。 「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます – はてなブログ開発ブログ 仕組みは正直良くわかりませんが、なんとなくスマートです。 タイトルがわかりやすくて、記事内の画像（OGP拾って... 続きを読む

FacebookのOGPを記事ごとに思い通りに！All in One SEO PackのSocial Metaが便利だった！ | 男子ハック

2014/10/29 48 users Facebook JUNP_N 男子ハック タイトル 説明文

FacebookのOGPを記事ごとに思い通りに！All in One SEO PackのSocial Metaが便利だった！ @JUNP_Nです。WordPressでサイト運営をしている方が対象ですが、Facebookでブログ記事などWebページをシェアした際に表示される画像やタイトル、説明文。OGP（Open Graph Protocol）を設定しているけど、思い通りにならない！と悩んでいる人は... 続きを読む

[M] はてなブログのブログカードがOGPに対応! はてなブログ以外もブログカードスタイルになるぞ | mbdb (モバデビ)

2014/09/06 24 users Twitter mbdb HatenaBlog モバデビ 反応

はてなブログの記事をきれいに記事中に挿入できるという機能ですが、これがoEmbed APIに対応しているということで、WordPressでもURLを貼り付けたら挿入できるように対応させてみました。 そこそこ反応を頂けまして、Twitterでもはてなブログ公式(hatenablog)に紹介してもらったりしたわけです。 先日公開した「ブログカード」をWordPressで利用されている方がいました。あり... 続きを読む

「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ

2014/09/05 47 users 2014-09-05 形式 概要 タイトル URL

2014-09-05 「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます お知らせ はてなブログでは、先日公開した「ブログカード」を拡張し、インターネットの一般的なWebサイトに対応しました。URLを貼るだけで、さまざまなWebページをコンパクトな「ブログカード」形式で紹介することができます。「ブログカード」は、ブログに掲載する記事のタイトルや概要... 続きを読む

大きな画像表示のTwitter Cardsを使おう。以前から使っている人は12文字追加するだけ。

2014/05/29 9 users Twitter Cards Twitter https 修正

概要 Twitterでより大きく目立つ画像表示ができるTwitter Cardsを設定しましょう。以前からTwitter CardsとOGPを設定されている方は、ほんの少しの修正で対応できます。 TwitterにはTwitter Cardsという機能があり、アドレスをツイートに含めるだけで、ツイートに画像を表示させたり動画を表示させたりできる機能があります。 以下の私のツイート（https://t... 続きを読む

Excelのデータ表を劇的に見やすくするカラースケールやデータバーが便利すぎて驚いた | Web担当者Forum

2013/10/29 224 users Excel カラースケール Web担当者Forum 安田英久

Web担トップ « 編集記事一覧 « [コラム] Web担のなかの人――編集部ブログ « 編集長ブログ―安田英久 « Excelのデータ表を劇的に見やすくするカラースケールやデータバーが便利すぎて驚いた ««Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? 連載編集長ブログ―安田英久 Excelのデータ表を劇的に見やすくするカラースケールやデータバーが便利... 続きを読む

OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める : Facebook開発者向けドキュメントの日本語訳とTips

2013/06/21 43 users Facebookペー Tips ニュースフィード上 イイネ

2013年06月21日02:32 by oklahomer OGPの仕様追加：記事にひもづくFBページや個人アカウントとの連携を強める カテゴリ 先日の開発ブログで、OGPの仕様追加が公開されました。これを用いることで、記事がニュースフィード上に流れるとき、その記事にひもづくFBページへのいいね！や個人アカウントのフォローを促すことができるようになります。 方法 方法は簡単で、Facebookペー... 続きを読む

Google+ は OGP より Microdata を優先するみたい | WWW WATCH

2013/04/11 64 users Microdata Description みたい テキスト

この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP （Open Graph Protocol） に指定した概要文 （og:description の値に入れてるテキスト） とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけで... 続きを読む

FacebookのOGP仕様がまたもや変更! og:imageの推奨サイズが1500×1500に! | [M] mbdb

2013/04/09 87 users Facebook mbdb image 推奨サイズ Tweet

FacebookのOGP仕様がまたもや変更! og:imageの推奨サイズが1500×1500に! Facebook Hacks Please Share! Tweet この記事を読むのに必要な時間の目安: 約 8 分 マジですかまた変更ですかそうですか。 久々にトップページをDebuggerで叩いたら、OGPにエラーがが。 Facebook Open Graphの仕様を、これまた久々に調べなおし... 続きを読む

【保存版】やるとやらないでは大違い！Facebookいいね！ボタンを最適化する「OGP」設定方法まとめ | ソーシャルメディアマーケティングラボ

2012/10/11 142 users Facebook Facebookいいね 久保田 ボタン 内容

Facebookのソーシャルプラグイン　「いいね！」ボタンの最適化に必須である「OGP（Open GraphFacebookのソーシャルプラグイン　「いいね！」ボタンの最適化に必須である「OGP（Open Graph Protocol）」について、その内容と具体的な設定方法をご紹介します。 こんにちは、アライドアーキテクツ株式会社　制作部　プロデューサーの久保田です。 突然ですが、あなたのサイトの... 続きを読む