Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サイトをつくってみた
Search
matumoto
April 21, 2021
Technology
0
30
サイトをつくってみた
2021/4月に行われた新入生歓迎LTの発表資料です
matumoto
April 21, 2021
Tweet
Share
More Decks by matumoto
See All by matumoto
testingを眺める
matumoto
1
160
sync/v2 プロポーザルの 背景と sync.Pool について
matumoto
0
410
Goトランザクション処理
matumoto
1
52
いまいちどスライスの 挙動を見直してみる
matumoto
0
350
Go1.22のリリース予定の機能を見る
matumoto
0
69
GoのUnderlying typeについて
matumoto
0
200
Typed-nilについて
matumoto
0
320
GoのType Setsという概念
matumoto
0
29
GoのRateLimit処理の実装
matumoto
0
380
Other Decks in Technology
See All in Technology
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.5k
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
Digitization部 紹介資料
sansan33
PRO
1
5.6k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
130
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
400
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
150
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
120
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
140
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
340
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Practical Orchestrator
shlominoach
190
11k
What's in a price? How to price your products and services
michaelherold
246
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
s1280136 松本響輝
・人物紹介 ・作ったサイトの紹介 ・全体像 ・作った手順の説明
拓実 よろしくたのむよ
いいんじゃな いかな
おーすごい
よくできているな
HTMLファイル
None
・必要な分ページを作る 例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む ・マークダウンファイルから他のファイルを読み込む ライブラリを紹介するのでc++のファイルを乗っけたかった ・いい感じなデザインにする
・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js(ヴュー・ジェイエス)またはVueは、Webアプリケーション におけるユーザーインターフェイスを構築するための、オープンソー
スのJavaScriptフレームワークである。他のJavaScriptライブラリを 使用するプロジェクトへの導入において、容易になるように設計され ている。 なんでVueを使おうと 思ったんだい?
ワイヤーフレームと呼ばれる雛形が すでに用意されている 誰でもすぐ簡単にホームページ が作れそうだね
マークダウンを一つのファイルか らURLに応じて呼び出せない 理想 /power /combination
None
ページの遷移 vue-routerを作る 内部でvue-routerが作られてる vuetify 使える 使える 初期設定 routerの設定とかが多い 自動的に設定されている サイトの生成
npm run buildでできる npm run generateでできる
・必要な分のページも作れた! pages/hoge.vue /hoge -> hoge.vueが表示される! ・URLに対応してマークダウンファイルも呼び出せそう! pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える
aiueo.mdを呼び出せばいい あとはC++ファイルを呼び出せば・・・
URLに応じてマークダウンファイルを読 み込めない 読み込むのにwebpackのraw-loaderというのを使っていた
3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある
None
/contentディレクトリに書き込むことで以下の形式のファイルを取得できる ・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを 呼び出せる→ あとはc++ファイルを呼び出せば…
豊富な拡張機能! remark-◦◦をnpm install するとmarkdownで色んな拡張機能が使える! 今回はremark-code-import-replaceというのを使いました。 素晴らしい!
HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)
HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!
1.GitHubでリポジトリを作っておく GitHubに登録して を押してリポジトリを作る
1.GitHubでリポジトリを作っておく cloneする 作業中… addして commitして pushする pullする
2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンド こんな簡単にできるのか
3.push-dirの設定をする ・ベースパスの設定をする 「/」→「/リポジトリ名/」 ・アセット(アイコンの画像とか)のパスの設定をする GitHub PagesではURLが「ユーザ名.github.io/リポジトリ名/」となる。 「ユーザ名.github.io/」がNuxt.jsでの「/」に対応しているので、Nuxt.jsの設定を「/リポジトリ名」 にする必要がある。
4.コマンド一つで公開! $ push-dir --dir=dist --branch=gh-pages Github Pagesにページをのっける --dir=dist さっきnpm run
generateで作ったdistディレクトリをGitHub Pagesにのっける --branch=gh-pages ブランチをgh-pagesという名前で作成する (ブランチは複数あるセーブデータの内の一つみたいなもの) ↓公式ドキュメント https://github.com/L33T-KR3W/push-dir
HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける
君もホームページを作ってみないか?