Upgrade to Pro — share decks privately, control downloads, hide ads and more …

サイトをつくってみた

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for matumoto matumoto
April 21, 2021
Technology
0
31

 サイトをつくってみた

2021/4月に行われた新入生歓迎LTの発表資料です

Avatar for matumoto

matumoto

April 21, 2021
Tweet

More Decks by matumoto

See All by matumoto
testingを眺める
Avatar for matumoto matumoto
1
180
sync/v2 プロポーザルの 背景と sync.Pool について
Avatar for matumoto matumoto
0
620
Goトランザクション処理
Avatar for matumoto matumoto
1
65
いまいちどスライスの 挙動を見直してみる
Avatar for matumoto matumoto
0
380
Go1.22のリリース予定の機能を見る
Avatar for matumoto matumoto
0
74
GoのUnderlying typeについて
Avatar for matumoto matumoto
0
210
Typed-nilについて
Avatar for matumoto matumoto
0
350
GoのType Setsという概念
Avatar for matumoto matumoto
0
38
GoのRateLimit処理の実装
Avatar for matumoto matumoto
0
450

Other Decks in Technology

See All in Technology
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
360
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
590
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
280
22nd ACRi Webinar - NTT Kawahara-san's slide
Avatar for Nao Sumikawa nao_sumikawa
0
100
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
650
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.6k
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
120
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
今こそ学びたいKubernetesネットワーク ～CNIが繋ぐNWとプラットフォームの「フラッと」な対話
Avatar for Takuto Nagami logica0419
2
130
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
370
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
510

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
350
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
57
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
120
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k

Transcript

  1. s1280136 松本響輝

  2. ・人物紹介 ・作ったサイトの紹介 ・全体像 ・作った手順の説明

  3. 拓実 よろしくたのむよ

  4. いいんじゃな いかな

  5. おーすごい

  6. よくできているな

  7. HTMLファイル

  8. None

  9. ・必要な分ページを作る 例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む ・マークダウンファイルから他のファイルを読み込む ライブラリを紹介するのでc++のファイルを乗っけたかった ・いい感じなデザインにする

  10. ・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js（ヴュー・ジェイエス）またはVueは、Webアプリケーション におけるユーザーインターフェイスを構築するための、オープンソー

    スのJavaScriptフレームワークである。他のJavaScriptライブラリを 使用するプロジェクトへの導入において、容易になるように設計され ている。 なんでVueを使おうと 思ったんだい？

  11. ワイヤーフレームと呼ばれる雛形が すでに用意されている 誰でもすぐ簡単にホームページ が作れそうだね

  12. マークダウンを一つのファイルか らURLに応じて呼び出せない 理想 /power /combination

  13. None

  14. ページの遷移 vue-routerを作る 内部でvue-routerが作られてる vuetify 使える 使える 初期設定 routerの設定とかが多い 自動的に設定されている サイトの生成

    npm run buildでできる npm run generateでできる

  15. ・必要な分のページも作れた！ pages/hoge.vue /hoge -> hoge.vueが表示される！ ・URLに対応してマークダウンファイルも呼び出せそう！ pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える

    aiueo.mdを呼び出せばいい あとはC++ファイルを呼び出せば・・・

  16. URLに応じてマークダウンファイルを読 み込めない 読み込むのにwebpackのraw-loaderというのを使っていた

  17. 3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある

  18. None

  19. /contentディレクトリに書き込むことで以下の形式のファイルを取得できる ・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを 呼び出せる→ あとはc++ファイルを呼び出せば…

  20. 豊富な拡張機能！ remark-◦◦をnpm install するとmarkdownで色んな拡張機能が使える！ 今回はremark-code-import-replaceというのを使いました。 素晴らしい！

  21. HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)

  22. HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!

  23. 1.GitHubでリポジトリを作っておく GitHubに登録して を押してリポジトリを作る

  24. 1.GitHubでリポジトリを作っておく cloneする 作業中… addして commitして pushする pullする

  25. 2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンド こんな簡単にできるのか

  26. 3.push-dirの設定をする ・ベースパスの設定をする 「/」→「/リポジトリ名/」 ・アセット(アイコンの画像とか)のパスの設定をする GitHub PagesではURLが「ユーザ名.github.io/リポジトリ名/」となる。 「ユーザ名.github.io/」がNuxt.jsでの「/」に対応しているので、Nuxt.jsの設定を「/リポジトリ名」 にする必要がある。

  27. 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

  28. HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける

  29. 君もホームページを作ってみないか？