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
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
240
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5k
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
360
初めてのDatabricks Apps開発
taka_aki
1
180
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
460
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.8k
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
290
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
190
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Designing Experiences People Love
moore
142
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Code Review Best Practice
trishagee
72
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
KATA
mclloyd
PRO
32
15k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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にのっける
君もホームページを作ってみないか?