サイトのOGP画像を自動生成する
最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。 サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL とは別に表示される物がこれにあたります。サイトのページが増えるとページ一つ一つに OGP 画像を用意することは手間がかかります。そこでこの記事では、OGP 画像を自動生成する方法を紹介します。 OGP 画像の作成方
hygen で生成 - 対話形式の Component 雛形 -
Component 作成にあたり、storybook や test も一度にコミットする場面が増えてきました。そして CSS Modules や、特定 Component 専用の custom hooks など、一つの Component を構成するファイル群はそれなりの量になってきます。例えば、以下の様な module 構成の Component です。これを手作業で作成するとなると、少し億劫になりますよね。 └── atoms └── Button ├── Button.stories.tsx ├── Button.test.tsx ├── Button.tsx ├── dependencies.ts ├── index.tsx └── style.module.css 作成時にButtonという名称だけ決めてしまい、CLI から雛形出力できれば、作業効率向上が見込めます。（story
大体いい感じになるKeynote・Googleスライド用無料テンプレート「Azusa 3」作った - SANOGRAPHIX Blog
なんと5年ぶりのアップデート 色々なプレゼンに汎用的に使えるテンプレートがほしいなと思って、Keynote・Googleスライド用のテンプレート「Azusa 3」を作った。無料で誰でもダウンロードできます。 Azusa 3 - 大体いい感じになる無料Keynote・Googleスライドテンプレート プレゼンつってもイベントも開催しづらいこんな時になぜ作ったのかは最後に書きます。 おぼえていますか マルチに使えるテンプレがほしい Azusa 3みどころ ダーク／ライトのカラーバリエーション Googleスライド・Keynote対応 Googleスライド版の見どころ Keynote版の見どころ 告知サイト なぜスライドテンプレートなのか おぼえていますか Azusaは、大体いい感じのスライドを作るためのテンプレート。 最早あのときは若かったね…感がある KeynoteテンプレートのAzusaは
DRY Kubernetes with Helm
Yes, I have read the information about data privacy and accept them. One of the coolest facets of Kubernetes is the declarative deployment descriptors. You describe what the system should look like and Kubernetes makes it happen. One of the worst facets of Kubernetes is the declarative deployment descriptors... A typical system constructed of micro-services will consist of dozens of configuration
GitHubでは既存のRepositoryをTemplateとして、新しいRepositoryを作成することができる | DevelopersIO
こんにちは、CX事業本部の夏目です。 本日はGitHubで面白い機能を見つけたので共有します。 Repository Template Generate new repositories with repository templates Sharing boilerplate code across codebases is a constant pattern in software development. Bootstrapping a new project with our favorite tools and directory structures helps programmers go from idea to "Hello world!" more efficiently and with less manual configuration. Today, we're
Generate new repositories with repository templates
ProductGenerate new repositories with repository templatesToday, we’re excited to introduce repository templates to make boilerplate code management and distribution a first-class citizen on GitHub. To get started, all you need to do is mark a repository as a template, and you’ll immediately be able to use it to generate new repositories with all of the template repository’s files and folders. Sha
Big Sky :: golang の html/template でレイアウトを扱う方法
golang の html/template について書かれたブログ等を色々見ていると、みんなレイアウトとコンテンツの分離に苦労している感があったのでどうやるか書いておきます。 t.ExecuteTemplate(w, "content", data) Go の html/template はテンプレートの名称を指定して ExecuteTemplate を実行します。しかし html/template には、その content を囲う layout テンプレートを指定する方法がありません。特に以下の様に ParseGlob を使った場合、各 html で同じ content という名前で define する事は出来ません。 template.ParseGlob("public/views/*.html") やりたいのは layout というテンプレートの中から content という名称
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し
JavaScriptテンプレートエンジンJsRender 基本のキ
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Start Bootstrap