[Keystone] ヘッドレスCMS
Keystone とは 認証サービスである Keystone は、OpenStack のダッシュボード画面や API に対するアクセスの際のユーザー認証の機能を担います。 OpenStack では、GUI の操作画面でのオペレーションは、各コンポーネントの API を介してすべて処理されるため、必須のコンポーネントです。 ...
Posts
[Astro] 静的サイトジェネレーター [エンドポイント、データフェッチ]
静的アセット Astro は、ほとんどの静的アセットを設定不要でサポートしています。プロジェクトの JavaScript (Astro front-matter スクリプトを含む) のどこでも import 文を使用でき、Astro は最終ビルドにその静的アセットのビルドされた最適化されたコピーを含めます。また、@import は CSS と <style> タグの中でもサポートされています。 ...
[Astro] 静的サイトジェネレーター [ルーティング]
ルーティング 静的ルーティング src/pages ディレクトリにある、Astro コンポーネント (.astro) と Markdown ファイル (.md) は自動的にウェブサイトのページとなります。 動的ルーティング 1つの Astro ページコンポーネントは、ファイル名に動的ルーティングパラメータを指定して、指定した条件に合致する複数のルーティングを生成することもできます。 ...
[Astro] 静的サイトジェネレーター [ページ、レイアウト]
ページ Astro ページ .astro 拡張子を使い Astro コンポーネントと同じ機能を持ちます。 src/pages/index.astro --- --- <html lang="ja"> <head> <title>Home</title> </head> <body> <h1>Welcom to my site.</h1> </body> </html> 全てのページで同じ HTML 要素を繰り返すことを避けるために、共通の <head> と <body> 要素を独自のレイアウトコンポーネントに移動できます。 src/pages/index.astro ...
[Astro] 静的サイトジェネレーター [インストール、ディレクトリ構成、Astro コンポーネント]
Astro コンテンツにフォーカスした高速なWebサイトを構築するためのフレームワークです。 プロジェクトを作成 以下のコマンドを実行して、プロジェクトを作成します。 npm create astro@latest Need to install the following packages: create-astro@1.2.4 Ok to proceed? (y) y √ Where would you like to create your new project? ... // プロジェクト名 √ How would you like to setup your new project? » a few best practices (recommended) ✔ Template copied! √ Would you like to install npm dependencies? (recommended) ... yes ✔ Packages installed! √ Would you like to initialize a new git repository? (optional) ... yes ✔ Git repository created! √ How would you like to setup TypeScript? » Relaxed ✔ TypeScript settings applied! next Liftoff confirmed. Explore your project! Enter your project directory using cd ./astro Run npm run dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add. Stuck? Join us at https://astro.build/chat npm run dev ディレクトリ構成 ・src/ - プロジェクトソースコード (コンポーネント、スタイル、ページ) ・public/ - コード以外の処理不要のアセット (フォント、アイコン) ・package.json - プロジェクトマニュフェスト ・astro.config.mjs - Astroの設定ファイル ...
[GitHub] コマンドを使いGitHubに登録するまでの流れ
セットアップ $ git init 作業ディレクトリ→ステージングエリア /*ファイルをひとつずつあげたい場合*/ $ git add ファイル名 /*ファイルを一括してあげたい場合*/ $ git add -A /"-A"を使うことで作業ツリー内のファイルを全て追加することができます/ ステージングエリア→ローカルリポジトリ $ git commit -m "コミットメッセージ" /*コミットメッセージはどういった編集内容なのかわかりやすく書いておくと良い*/ ローカルリポジトリ→リモートリポジトリ $ git remote add origin https://github.com/ユーザ名/xxx.git $ git push -u origin master 作業用ブランチに develop の最新コードを取り込む # developブランチへ移動 $ git checkout develop # git pullで develop を最新にする $ git pull origin develop # 作業用ブランチへ移動 $ git checkout 作業用ブランチ # mergeコマンドで develop の内容を取り込む $ git merge develop コンフリクトしていたらコンフリクトを解消する。 コンフリクトしたファイルに自分の更新内容を反映させる。 エラーが出ていない、動作に問題がないことを確認する。 ...
[Vue3] プロジェクト作成 (windows)
Vueとは Vue は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。 Vue3 ドキュメント ...
mediumブログをはじめました
バッカムブログのコンテンツを一部mediumブログに移行します。 このブログはhugoで運用しているのですが、非エンジニアのメンバーでも更新が簡単にできるmediumブログを運用開始することにしました。 移行するのは会社紹介系の記事で、こちらのブログは引き続き技術メモ的な扱いになる予定です。 ...
Ubuntuで外付けドライブが操作できなくなったらchrome remote desktopが怪しい
リモートワークが増えてchrome remote desktopの利用頻度も上がってる今日このごろですが、ubuntuにつないでいた外付けメディアが急に操作できなくなったりしませんか？ ...
[hugo] ショートコードを使ってコードや動画を埋め込み
hugoに動画やコードを埋め込む時はショートコードを使います。ショートコードは、組み込み、またはカスタムのテンプレートを呼び出すシンプルなスニペットです。 ...