Webサイト制作に係る記事

Hugoの外部API利用機能

1. Hugoで外部APIデータの取得 1-1. HugoでData-Driven Content機能を利用する Hugoで外部APIのURLで取得したCSVやJSONデータを利用できるData-Driven Content機能があります。文書生成時で取得したデータです（ページ表示の毎アクセス時ではありません）。 1-2. WEB APIのテスト http://project.iw3.org/zip_search_x0401/ - ZIP SEARCH API SERVICE 「JIS X0401」対応版ver 1.0.0 サンプル例としてIW3 PROJECTのページで紹介されている以下の例でテスト。 http://api.thni.net/jzip/X0401/JSON/郵便番号上3桁の数値/郵便番号下4桁の数値.js 郵便番号 => 住所を返してくれるWEB APIだ。 $ curl http://api.thni.net/jzip/X0401/JSON/753/0070.js { "state":"35", "stateName":"山口県", "city":"山口市", "street":"白石" } 1-3. Shortcode呼び出しを作成 Data-Driven Contentは記事のMarkdownファイルではなく、HTMLで記述する部分で機能するものであるため、 Shortcodeを作ってその中に記述します。 layouts/shortcodes/zipaddress.html {{ $dataJ := getJSON "http://api.thni.net/jzip/X0401/JSON/" (.Get 0) "/" (.Get 1) ".js" }} <ul> <li>state = {{ $dataJ.state}}</li> <li>stateName = {{ $dataJ.stateName}}</li> <li>city = {{ $dataJ.city}}</li> <li>street = {{ $dataJ.

August 23, 2022

Webサイトの投稿機能

1.　NetlifyCMSでWebサイトの投稿機能追加今回は、ヘッドレスCMSであるNetlifyCMSの公式サイトに沿ってHUGOサイトの投稿機能構築の仕方を簡単に説明します。なぜNetlifyCMS？ NetlifyCMSの投稿機能を使うとAPIの作成など時間をかけずに投稿者自身がWEB上で記事を書けるようになります。今回の主題であるNetlifyCMSを使えば、誰でもWeb上で投稿できるようになります。NetlifyCMSは、シンプルで視覚的に簡単に理解できます。NetlifyCMSのデモサイトがありますので体験できます。 NetlifyCMSは、OSSであり公式サイトによると以下のような特徴があります。 1).最新のフロントエンドツールを実装して、より速く、より安全で、よりスケーラブルなサイトを提供することができます。編集者は、コンテンツ管理要件を満たすわかりやすいUIと直感的なワークフローを提供します。 2).編集者に優しいユーザーインターフェース Web ベースのアプリには、リッチテキスト編集、リアルタイムプレビュー、ドラッグアンドドロップメディアアップロードが含まれています。 3).コンテンツチームのための直感的なワークフロー作成者と編集者は、下書きからレビューまでのコンテンツを簡単に管理して、任意の数のカスタムコンテンツタイプにまたがって公開できます。 4).GitHub アカウントを使用しないインスタントアクセス Git Gateway を使用すると、GitHub アカウントを持っていない場合でも、すべてのチームメンバーに CMS アクセスを追加できます。 5).JANstack上に構築 Netlify CMS は、クライアント側の JavaScript、再利用可能な API、および事前に構築されたマークアップに基づいています。WordPressのようなサーバー側のCMSと比較して、より良いパフォーマンス、より高いセキュリティ、より低いスケーリングコスト、そしてより良い開発者体験ができます。 2. NetlifyCMSのインストール既存のサイトに追加もできますが、今回はテンプレートを使ってインストールします。 2-1. テンプレートから始める Github1とNetlify2への登録は、済んでいるとします。 NetlifyCMSサイトの以下のページに行き「Deploy to Netlify」をクリックします。上記のボタンをクリックした後、GitHubで認証し、リポジトリ名を選択します。Netlify は、GitHubアカウントにリポジトリのクローンを自動的に作成します。次に、Netlify で新しいサイトをビルドして展開し、ビルドの完了後にサイトダッシュボードに移動します。リポジトリ名を「hugo-cms」にしています。「Save & Deploy」をクリックします。 Netlifyの画面が表示されdeployが始まり、完了するとサイトが表示されます。 KALDIというサイトです。 Githubのリポジトリを確認します。「hugo-cms」が新規に作成されています。 2-2. 新しいサイトでNetlifyCMS にアクセス登録しているメールアドレスに招待メールが届きますので、Netlifyでのデプロイが完了していること確認後「招待を承諾する」をクリックします。パスワードを入力し、サインインすると、CMS に移動します。登録が完了しログイン状態になりますので、この状態でCMSへアクセスします。 <yoursiteaddress.com>/admin/へアクセスするとCMSを表示することができます。投稿を追加および編集するか、[製品] ページのコンテンツを変更してみてください。保存すると、変更はすぐにGitリポジトリにプッシュされ、Netlifyでビルドがトリガーされ、サイトのコンテンツが更新されます。編集画面です。「Pubilsh」をクリック後サイトが反映するまでに少し時間がかかります。編集が反映された画面です。サイトのGithubリポジトリの編集内容の確認画面です。 2-3. NetlifyCMSのアクセスアカウントの追加 Githubに登録されていたメールは登録されています。パスワードは最初に登録したものとなります。 Netlifyにログイン後、招待したいアカウントを追加します。

August 23, 2022

高速なWebサイト

1. ページの表示速度が早いWebサイト Hugoの公式サイト1によるとパフォーマンスは、Googleが最近ページの読み込み時間とSEOに焦点を当てていることを考えると、必要な利点です。 Hugoのような静的なサイトジェネレータを利用することは、WordPressのようなフル機能のCMSより、検索ランクで競合他社のブログを凌駕する優れた方法です。静的なオープンソースWebサイト2は、特にフル機能の(しかし肥大化した)コンテンツ管理システムの負担を負うサイトと比較して、信じられないほど高速です。静的なHUGOのウェブサイトを選ぶことは、明白な利点として表示スピードの自社サイトを公開できます。よりよい性能デプロイ時にページを生成できるのに、ページがその場でビルドされるのを待つのはなぜですか？最初のバイトまでの時間を最小限に抑えることになると、CDN3を介して提供されるビルド済みファイルに勝るものはありません。より高いセキュリティ Hugoはオープンソースの静的サイトに関するものであるため、WordPressに存在するセキュリティホールが欠けています。サーバー側で悪用されるものは何もありません。実行するPHPも、スクリプトも、何もない。これにより、Hugo静的サイトジェネレータは非常に安定し、セキュリティ侵害に対する価値のある敵であることが証明されます。より安く、より簡単なスケーリングデプロイメントがどこにでも提供できるファイルのスタックになる場合、スケーリングはそれらのファイルをより多くの場所に提供することの問題です。CDNはこれに最適であり、多くの場合、すべてのプランにスケーリングが含まれています。カスタマイズ静的なWebページは、コンテンツとWebデザインを100%制御できます。WordPressのようなCMSではなく、静的なサイトジェネレータを検討することは、異なるデザインのさまざまなランディングページを作成することを計画している場合は特に理にかなっています。Hugoのウェブサイトには、編集中にWebページを自動的に更新するライブリロードシステムがあり、開発中のカスタマイズとパーソナライゼーションが驚くほど簡単になります。 2. HUGOを使ったサイト制作サービス Hugoは、ブラウザよりもテキストエディタで書くことが必要です。 Hugoは、複雑なランタイム、依存関係、データベースの設定を心配することなく、Webサイトを手作業でコーディングが必要です。 Hugoは、ブログ、会社のサイト、ポートフォリオサイト、ドキュメント、単一のランディングページ、または数千ページのウェブサイトを構築することができます。ブログ、ポートフォリオ、会社のWebサイト、雑誌、ドキュメントサイトなどのサイトは、静的サイトジェネレーターを使用して、スピーディに作成いたします。 RAIZINでは、HUGOサイトの制作サービスを提供しておりますので、気軽にご相談ください。 3. 自社投稿機能の提供投稿（記事）するためだけのシンプルなＣＭＳが必要となります。（ヘッドレスCMS4と言います。）「リッチテキスト編集」「リアルタイムプレビュー」「ドラッグアンドドロップによるメディアアップロード」などの機能を備えています。また、HUGOサイトと投稿CMSの連携が、必要となります。通常、ウェブサイトの作成には多大な時間の投資が必要です。それを開発し、維持し、そしてホストすることの経済的コストを計画しなければなりません。自社で開発する場合は、重要な技術的知識が必要です。これは多くの人がそれらを構築することを思いとどまらせることがよくあります。ただし、すべてのWebサイトを実行するために、複雑なアーキテクチャやコストのかかるリソースが必要なわけではありません。当社では、サイト全体の構築後、「自社投稿機能」を提供するサービスをしていますので、気軽にご相談ください。 HUGO公式サイトから引用です。 ↩︎ WordPressのような従来のデータベース駆動型サイトの構造で構築されています。このタイプのWebサイトは、不格好で、読み込みが遅く、開発者が維持するのが面倒で、ハッカーに対して脆弱です。静的サイトは、これらの問題の多くに対処することができ、ウェブサイトのニーズによりよく役立ちます。 ↩︎ コンテンツ配信ネットワーク (CDN) とは、地理的に分散したサーバーのグループを指し、連携してインターネットコンテンツを高速に配信します。 CDN を使用すると、HTML ページ、javascript ファイル、スタイルシート、画像、ビデオなどのインターネットコンテンツを読み込むために必要なアセットをすばやく転送できます。CDNサービスの人気は高まり続けており、今日では、Facebook、Netflix、Amazonなどの主要サイトからのトラフィックを含む、Webトラフィックの大部分がCDNを介して提供されています。 ↩︎ システム内でコンテンツとデータを作成、編集、および保存することはできますが、従来の CMS からの逸脱はテンプレートにあります。CMS テンプレートシステムを使用してページを作成する代わりに、そのすべてが CMS の外部にある別のフレームワークにオフロードされます。これは、システム内のコンテンツにデータとしてアクセスできるようにするアプリケーション・プログラミング・インターフェース (API) を介して実現されます。 ↩︎

August 22, 2022