[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 ドキュメント
Ubuntuで外付けドライブが操作できなくなったらchrome remote desktopが怪しい
リモートワークが増えてchrome remote desktopの利用頻度も上がってる今日このごろですが、ubuntuにつないでいた外付けメディアが急に操作できなくなったりしませんか？
[hugo] ショートコードを使ってコードや動画を埋め込み
hugoに動画やコードを埋め込む時はショートコードを使います。ショートコードは、組み込み、またはカスタムのテンプレートを呼び出すシンプルなスニペットです。
バッカムブログをWordpressからHugoへ移行しました
弊社コーポレートサイト backham.me がリニューアルされてnetlifyに移行したのにあわせて、同ドメインのサブディレクトリで運用していたバッカムブログもnetlifyに移すことになりました。
そしてnetlifyといえば静的サイトジェネレータ！ということでwordpressからhugoに移行しました。
hugoとは
THETAとスマホでWi-Fi接続できない場合の対処法
Miyagi です。RICOH THETA V で 360 度画像の撮影を試みるも、THETA とスマホで Wi-Fi 接続が上手く接続できず、困りました。。
先に結論を書いておくと、THETA の Wi-fi 帯域を 5G に変更すること、ファームウェアを最新にすることがポイントでした。
韓国コスメ のバーチャルメイクのサービス「MAHOU MAKE (BETA)」 を公開しました
こんにちは、バッカムではARや機械学習を使った開発をいろいろやってます。最近だとこのアプリとかこのARサービスとかを開発をしました。フロントエンドはもちろん、最近のコロナ禍でVRの開発もいろいろとやらせていただいてます。
そんななか、1年以上前からコツコツと社内で開発してきたサービスがあります。発端は2年半ほど前のtensorflow.jsの公開に遡ります。それまでバッカムではiOSのARKitやintelのRealsenseを使ってARの開発は行っていましたが、デバイスの機能を使わずにブラウザだけで機械学習の推論ができるというのは衝撃でした。ただ最初は静止画で動かしたり、動画で推論しても動きがカクカクしていて、面白いけどARKitやネイティブアプリと比べると品質的にどうしても見劣りしてました。そう思いつつ面白いのでいろいろ作っていくうちに、PCなら動画でそこそこ動くレベルのものになり、スマホで作りはじめたらスマホでも動画がそこそこ動くようになってきました。