ホームページ作成手順
た・Wordpressブログサイトを所有しているが、その派生展開でホームページが作れるか？
・web開発案件取るために、プログラミングで自由にデザイン変更したい。
・HTTP+CSS練習したい。
・フロントエンド開発ができるようになりたいので、JavaScriptの練習にもなるとベスト。
たwordpressの基本
・PHPベースのコンテンツマネジメントシステム
・HTTP書かなくても操作できるホームページ、ブログサイト開発環境みたいな感じ
・CSSやJavaScriptを埋め込むことも可能
WordPressを利用するためには次のようなステップを踏みます。
1.レンタルサーバーを申し込む
2.ドメインを用意する ※不要な場合は3へ
3.WordPressをインストールする
4.HTTPS化する
たHTTP,CSS,JavaScript
HTMLは文章を構造化するマークアップ言語、CSSは文書のスタイルを定義するスタイルシート、
JavaScriptはWEBページに動きをつけるプログラミング言語です。JavaScriptを使うことによって、ユーザーのアクションに応じたコンテンツを表示することができます。
たCONOHAwing：レンタルサーバー、独自ドメイン
2つ目の無料独自ドメイン追加方法
無料独自ドメインの変更方法
【独自ドメイン（無料）の変更】
ドメインの変更は不可。
たソースコードアップデート方法 サイト管理→ファイルマネージャー→ 左側にディレクトリが表示されているので、「public_html」をクリック、ファイルをアップロードするWebサイトのドメイン名をクリックします。
url:
たポートフォリオ用HTMLサイトサンプル
たテンプレート使って複数のhtmlページを公開してみるテスト
2)
たいろいろいじってみた結果、".html"ファイルを編集してもページが変更されず、".index"ファイルを編集するとページが変更されることがわかった。なぜなのかは不明。
各ファイルの役割について確認が必要。
た「htmlサイトのソースコードにおける、.indexと.htmlの役割の違い」by chatGPT
->
HTMLサイトのソースコードにおいて、.htmlと.indexは、それぞれHTMLファイルを指す拡張子です。
通常、Webサイトのトップページは、index.htmlやindex.htmといった名前を持つHTMLファイルになります。これは、WebサーバーがHTMLファイルを探すときに、まずindex.htmlやindex.htmを探しにいくように設定されているためです。
つまり、.htmlと.indexは、それぞれHTMLファイルを指す拡張子であり、そのファイル内に記述されたHTMLコードによってWebページが構成されます。ただし、.indexがWebサイトのトップページを指す場合があるという点が、.htmlとの違いです。
たHTMLでホームページ作る手順
テキストエディタを用意する
HTMLの基本となるタグを記述する
作りたいページ内容に応じてタグを記述する
HTMLファイルとして保存する
作成したファイルをブラウザで表示してみる
サーバーにアップロードする
た機能要件
-機能の列挙:コア機能に絞って進める
-画面遷移図
-ワイヤーフレーム:機能、パーツのレイアウト
非機能要件
サイトスピード、セキュリティ、リリース/デプロイの簡便性、ユーザーサイドの要件や課題に則しているかの確認
たその他言語
・Bootstrap5
・React
・PHP
たポートフォリオサイト要件定義
目的:副業個人事業主に、気付きとソリューションを与えることと、データアナリストとしての技術のアピール
→与える結果:
-義務:納期、品質、進捗見える化、RASIChart、
-期待:WOW!、スタイリッシュ、便利、差別化、メンテナンスフリー、(安全、
→リーチ拡大、自動化、見える化、一覧性、
＜機能要件＞
・Showcase
・feature list（要素技術一覧＋作品一覧）
・効果測定結果ppt
・納品関連
-事前納品物：ガントチャート、見積書、RASIC、要件定義書
-納品物：コード一式、※追加料金で対応：納入仕様書、ユーザーズマニュアル、
-納品手段：クラウド環境実行でサービスのみ提供、GoogleColabファイル、PyInstallerでexe、GitHubプライベートリポジトリでファイル環境一式 ※環境構築サポート必要な場合は別料金
※リリース後メンテナンスが要求される場合はクラウドサービス提供の場合のみとする。
→自力運用できない素人向けにはサービス提供のみで保守運用費用が掛かる旨を明示
＜非機能＞
HTTP＋CSS、作品の一部はJavaScriptで実行可能、
ディレクトリ構造(index.html,納品.html）
＜拡張性＞
※作品開発blog@Zenn
※効果測定ppt
た○作品一覧:
イオンネットスーパーダイジェスト、
ツイートトレンドwordcloud、
会議音声wordcloud e.g.毎週更新ポッドキャストからWC化→許可取りOKのch
Amazon自動購入、
-言語:Python、GAS、HTML+CSS、JavaScript、
-API:openAI系API、SNS系API、Gmail、
-要素技術:python基本文法、文字列操作、df操作、グラフ描画、サーバレスコンピューティング、
-ライブラリ numpy,pandas,matplotlib,scimitar-learn,
→feature list
たcodepen オンラインエディタ