Hugo

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

HugoサイトのPWA対応

1. Hugoで構築したサイトをPWA化 1-1. PWAとは PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。 PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。 Web アプリマニフェストを追加する方法本サイトでは、トップページのみPWA化となります。 1-2. 手順 manifest.webmanifestの作成 icon画像の作成 icon画像の配置 manifest.webmanifestの修正と配置ブラウザでmanifest.webmanifestの内容が表示されていることを確認 Service Workeの作成 Service Workeの配置と確認 1-3. manifest.webmanifestの作成 Simi Cartのサイトは、PWA マニフェストジェネレーターとして「Web アプリマニフェスト」と、PWA 用にサイズが最適化されたアイコンを自動的に生成してくれます。 display:standaloneとしました。 Web アプリを開いて、スタンドアロンアプリのようなルックアンドフィールにします。アプリは、ブラウザーとは別の独自のウィンドウで実行され、URL バーなどの標準のブラウザー UI 要素を非表示にします。 scope:ブラウザーがアプリ内にあると見なす URL のセットを定義し、ユーザーがいつアプリを離れたかを判断するために使用されます。scopeは、Web アプリのすべてのエントリポイントと出口ポイントを包含する URL 構造を制御します。scope,scope,start_url,scope内に存在している必要があります。 scope が相対 URL である場合、ベース URL はマニフェストの URL になります。スコープは、ナビゲーションを現在のサイトに制限します。 "scope": "https://example.com/" ナビゲーションを現在のサイトのサブディレクトリーに制限します。 "scope": "https://example.com/subdirectory/" (注意)scope:ユーザーがアプリ内での外部に移動するリンクをクリックするscopeと、リンクが開き、既存の PWA ウィンドウ内でレンダリングされます。 target="_blank"リンクをブラウザータブで開く場合は、タグに追加する必要があります。Android では、リンクはChrome カスタムタブ**target="_blank"**で開きます。 { "theme_color": "#a4115e", "background_color": "#f2f4f4", "display": "standalone", "scope": "https://raizin.

August 15, 2022

メールの送受信機能

1. mailchimpとは 1-1. mailchimp 専門家のアドバイスが組み込まれたマーケティングプラットフォームから電子メールや自動化を送信することで、新規顧客やリピート顧客を獲得に役立つクラウドサービスサイトです。とても便利なサイトです。 1-2. 料金無料範囲マーケティングCRM クリエイティブアシスタントウェブサイトビルダーメールチンプドメインフォームとランディングページ制限プランには最大 2,000 件の連絡先が含まれます。ターゲット層の規模を選択して価格を計算します。毎月の電子メール送信制限は 10,000 送信 (1 日の制限は 2,000) です。 ※連絡・メール送信制限を超えた場合、送信は一時停止されます 1-3. CNAME レコードを追加 Google ドメインでは、2 つの CNAME レコードを追加します。 2. メールフォーム mailFormをフッターに追加しました。気軽にご連絡ください。チェックボックスは現在無効です。（使えません）フッターにボタンがあります。メールフォーム画面（参考サイト） mailchimpサイト以上

August 15, 2022

VSCode上での「R Markdown」

1. VSCodeで「R Markdown」ドキュメント作成環境の構築 1-1. Rのインスト―ル Download R-4.2.1 for Windows からダウンロード後インストールします。 1-2. pandoc をインストール Visual Studio を閉じます。 pandoc.org の pandoc をインストールします。 1-3. パッケージのインストール knitr および rmarkdown パッケージをインストールします。 Rでインストールします。 install.packages("knitr") install.packages("rmarkdown") 1-4. VSCodeの拡張機能をインストールします。 [R Tool]と[R]をインストールします。 2. RMDファイル作成とプレビュー --- title: "R　ドキュメントの作成" output: html_document --- This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and Microsoft Word documents. For more details on using R Markdown see <http://rmarkdown.

August 12, 2022

R Markdownについて

1. R Markdownとは 1-1. R Markdown公式サイト「R Markdown」は、データ分析を高品質のドキュメント、レポート、プレゼンテーション、ダッシュボードに変換します。 R、Python、SQL などの複数の言語を使用し、テキストとコードを織り交ぜて、エレガントにフォーマットされた出力を生成します。 R_Markdownは、 HTML PDF MS Word Beamer HTML5スライド Tufteスタイルの配布資料書籍ダッシュボード光沢のあるアプリケーション科学論文 Webサイトなど、数十の静的および動的出力形式をサポートしています。ギャラリー 2. Install R 2-1. Ubuntuのパッケイジ Ubuntu Packages For R 「文書管理」に使える機能が多くあります。Rが必要となりますが、IoTとデータサイエンス、レポートなどの視覚化に役立ちそうです。データを処理するため、RMarkdownファイルでSQLを実行できるので「DB＋視覚化」を動的に表示できるのも驚きです。参考サイト私たちのR: ベストプラクティスの探究(日本語) R Markdown テンプレート『Rによる計量政治学』サポートページ R Markdown公式サイト R Markdown公式ガイド R Markdownグローバルコモンズ

August 11, 2022

JamStackサイト制作手順

1.各種登録カスタムドメイン登録サイト：例）Google Domain ソース管理サイト：例）Github,Gitlab アプリのビルド＆デプロイ：例）Netlify ヘッドレスCMS：例）microCMS、Strapi（自分でクラウドに構築） 2.画面設計と文章・画像の準備メインアイコン、faviconの作成アイキャッチ画像の準備（wepb、svg、jpegなど）顧客の準備できる画像の加工基本的な顧客情報、商品などの説明 3.Hugoのテーマの選択 Hugoのテーマは、200以上あります。当社では、「Hugo Serif」を採択しています。 4.HugoのインストールとGitHubへpush ローカルPCへHugoのテーマをインストールします。当社では、WSLのUbuntu22.04となります。 GitHubへソースをpushします。 5.Hugoの各種設定と配置基本的な設定をします画像、文章を配置します。 6.ヘッドレスCMS ヘッドレスCMSは、お客様が必要な場合に準備します。当社のサイトは、ローカルPCで編集したものをGitHubへpushしています。ヘッドレスCMSのAPI連携を構築します。小さな個人・法人サイトでは、microCMSは、無料で使えるの便利です。 Strapiは、ある程度のスペックが必要ですので注意が必要です。弊社のサンプルアプリは、Strapiを使っています。 7.Netlifyへ連携 Netlifyは、Github,GitLabと簡単に連携できます。カスタムドメインとSSLの設定をします。「Google DomainのDNS」で事前にNetlifyのIPを設定しておきます。 8. デモアプリ Strapiを使ったサンプルアプリ（SQLite） Sveltekit×Render.com(Strapi)×Github×Netlify 以上

July 10, 2022

サイトのリニューアル

はじめに RAIZINのサイトでは、記事が増えましたのでHugoのドキュメント管理機能をフルに使ったサイトにリニューアルしました。本サイトで、ドキュメント管理機能を楽しんでください。旧サイトは、「　https://raizin-site.netlify.app/　」　に置いてあります。 1. Hugoを使ったドキュメント管理実用的で信頼性の高いドキュメントサイトを迅速に稼働させ、ユーザーにとって優れたコンテンツに集中することができます。大規模な文書セットに対して便利な文庫構造のスケルトンを自由に設計できます。マークダウン(Markdown)形式ですの統一化された文書様式が設計できます。データベースを使いませんので、文庫構造の追加・変更が簡単にできます。カテゴリ、タグ、作成者、日時、公開・非公開、表示順位などの要素が追加できます。非公開の文庫を運営することも可能です。 2. フロントマター(Front Matter) Hugo では、コンテンツ（Markdownファイル）のタイトル、日付、カテゴリや任意のパラメータ等のメタデータを追加することができます。メタデータはコンテンツファイルの先頭で指定しますが、この部分をフロントマターと呼びます。フロントマターの例 yaml形式です。サイドバーへの表示、表示順、タグ、カテゴリを設定しています。 - - - title: "サイトのリニューアル" published: true date: 2022-07-10T08:06:25+06:00 description: "RAIZIN Inc.のサイトをリニューアルしました。" menu: sidebar: name: "サイトのリニューアル" identifier: 001-open parent: 10-2023 weight: 10001 tags: ["サイト","RAIZIN","ドキュメント","DX","ペーパレス","Hugo"] categories: ["Basic", "ニュース"] hero: 001s.webp - - - 3. 必須パラメータ title コンテンツのタイトル date コンテンツの日付（ソートに使用されます） 4. オプションパラメータ description コンテンツの説明文 draft: 下書きフラグ true に設定するとビルド時に –buildDrafts オプションをつけなければページが生成されません。 publishdate: 発行日 true に設定するとビルド時に –buildFuture オプションをつけなければページが生成されません。 type: コンテンツのタイプ詳しくは前回のエントリを参照ください。 isCKJLanguage: 日本語韓国語中国語を含む場合は true を設定してください。サマリーや文字数カウントに影響します。 config.

July 10, 2022

文書の管理

1. はじめに 1-1. 文書のペーパレス化の課題業務業務ノウハウを蓄積し活用したい関係者が流用できる文書のひな型をデータベース化したいひな型を作るルールを標準化したいペーパレス化したい検索ができるようにしたい担当者のみが詳細を把握している状態の属人化をできるだけ避けたい。同じような文書を担当者が変わる度に作成する無駄をなくしたい。ブラウザがあれば業務が完了できるようにしたい遠隔地からも同じ作業ができるようにしたい様式美のためにやっている文書作成作業を軽減したい部署毎の文書作成ローカルルールをなくしたい文書作成コストを下げたい Word、Excelの課題 Word、Excelがないと読めないバージョン管理がしにくい共同編集がしにくい装飾と文章構造が分離されていない差分が見にくい機械可読性に欠ける検索が難しい大量の文書管理がファイルベースとなり管理が難しいファイルの所在さえも担当者以外わからないことが多い。同じような文書を何度も作成している。文書の内容が多いと文書自体の装飾や編集に時間がかかります。 PDFの課題スマートフォンで読みにくい検索性が乏しい編集できないバージョン管理がしにくい再利用しにくい機械可読性に欠ける 1-2. 構造化テキスト（Markdown形式1）マークダウン形式の文書で保管することのメリット文章構造と表示部分が分離された軽量なフォーマットになります。手軽にドキュメントを装飾できるフォーマットが使えます。このことにより、流通性が高まり、部署、場所をまたいで利用できるようになります。ファイルをダウンロードすることなく、多くの人の目に届けられる。ファイルをメール等で送付することなく修正・校正、コメントなどフィードバックを得やすくすることが可能システム化が簡易になります。このことにより以下のメリットがあります。文書管理が簡単になり、属人化が避けることで文書資産を幅広く活用できます。部署などの文書作成のローカルルールが公開することで誰もが理解できるパブリックなルールとなります。検索が可能となり、文書の作成時に利用できる。ブラウザ上で閲覧可能となります。画像、動画などの管理もシステムで管理・共有・流用できます。マークダウンは、PDFやHTMLへも変換は容易にできます。共同編集が可能1となります。文書の履歴管理ができるようになり、最新版の様式をいつも使えます。レビューやコメント機能が使えます。既存のWord文書内容の流用ができます。マークダウン形式の文書で保管することのデメリット管理するためには、やはりシステムが必要マークダウン形式の文書作成に統一するコンセンサスが得られるか（これが最も難しい） 2. システム開発前章で求められる機能を実現できるシステムは、どのようなものかまとめます。 2-1. 要件文書の構文が、自由に作成文書の構文をもとに作成された文書（ページ）は、この単位でマークダウンファイルとして保存文書の編集は、公開・非公開、部署・担当者・業者、プロジェクト毎に閲覧・編集権限の管理全文検索かつ検索結果の制限ブラウザ上で閲覧・編集画像(写真）、動画などの管理もシステムで管理・共有・流用マークダウンは、PDFやHTMLへも変換共同編集が可能1 履歴管理レビューやコメント機能既存のWord文書内容の流用地方の県レベルで、毎年最低１０万ページ作成可能(システムの拡張性) 同時アクセスが１万件程度公開・非公開、部署・担当者・業者、プロジェクト毎に閲覧・編集権限の管理データの暗号化 2-2.

March 10, 2022

Hugo環境構築

1. Go言語のインストール(Ubuntu 22.04) 1-1. Apt command $ sudo apt update -y $ sudo apt install golang-go 確認 $ go version (out) go version go1.18.1 linux/amd64 $ which go (out) /usr/bin/go 2. hugoのインストール(apt) Hugoドキュメント参考URL 2-1. インストール ~$ sudo apt update ~$ sudo apt -y install hugo ~$ hugo version hugo v0.92.2 (削除) sudo apt-get remove --auto-remove hugo 2-2. 確認 $ hugo version (out) hugo v0.92.2+extended linux/amd64 BuildDate=2022-02-23T16:47:50Z VendorInfo=ubuntu:0.92.2-1 $ which hugo (out) /usr/bin/hugo 3.

February 10, 2022