このガイドではニュースをはじめとするサイト内の各種コンテンツを編集する際の手順を案内します。バグ修正や機能改善のために開発環境を構築したい場合は後述のクイックスタートガイド for Developersを参照してください。
- 新しいコンテンツを追加する（例: ニュースを追加する、メンバーを追加する）
- 基本的な文章を変更する（例: 概要の内容を変える）
- レイアウトを入れ替える（例: ニュースと概要を入れ替える）
- 新しい機能を追加する（例: Vimeoの動画を埋め込めるようにする）
- サイトの機能に埋め込まれた文章を変更する（例: フッターのライセンスの文体を変える）
- バグ修正をする
このWebサイトの内容を編集するには以下のソフトウェアが必要です。
- シェルコマンドを実行できるソフトウェア（例: iTerm、ターミナル.app、xterm、WSL）
- Node.js（例: Node.js v16.0.0）
- Gitを操作できるソフトウェア（例: gitコマンド、Sourcetree）
- テキストファイルを編集できるソフトウェア（例: VSCode、テキストエディット.app、vi）
また、画像ファイルを新たに追加する際には追加で以下のソフトウェアが必要です。
- ImageMagick
このステップにおいて、以降は暫定的にmacOSユーザー向けに限定して案内を行います。それ以外の環境をお使いの方は各自お調べの上、POSIX準拠相当の環境であれば同様の環境が構築できるはずです。
これらの環境を用意するにはコマンドラインを用いると簡単で安全です。既にHomebrewまたはMacPortsを導入済みの場合は1-2. 必要なソフトウェアのインストールへ進んでください。 以下のコマンドをコピーしてターミナルに貼り付けて実行します。これによりHomebrewがお使いのMacにインストールされます。実行の際にはMacがインターネットに接続されている必要があります。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Homebrewはさまざまなソフトウェアをコマンドラインからインストールするためのツールです。
Homebrewを使ってコマンドラインで必要なソフトウェアをインストールします。ステップ 1. 環境構築のリストで必要なソフトウェアを確認します。以下に実行するコマンドの一例を示します。
- iTermをインストールする
brew install iterm2- Node.jsをインストールする
brew install node- Gitコマンドをインストールする
brew install git- VSCodeをインストールする
brew install visual-studio-code- ImageMagickをインストールする
brew install imagemagick上級者のためのヒント（クリックして開く）
brew search hubのようにコマンドを実行すると任意のキーワードでソフトウェアを検索できます。この例ではhubコマンドを検索しています。hubコマンドはgitコマンドの上位互換性をもつソフトウェアで、issueの閲覧やPull Requestの作成など、GitHubの機能をコマンドラインから利用することができます。
このWebサイトはGitで管理されています。このステップではGitHub上にあるリポジトリの内容を編集できるようにします。Gitについて不明な場合は各自で調べて確認してください。
このWebサイトを編集するにはリポジトリをForkするか、Cloneする必要があります。それぞれの操作の特徴は以下の通りです。
- 変更を本番環境に反映させる前に、dev.superstarmine.gaでWebサイトの変更を確認できます。
- Websサイトの変更をdev.superstarmine.gaで確認するにはdev.superstarmine.gaが紐づけられているリポジトリの管理者の承認が必要です。
- 変更を本番環境に反映させるにはdev.superstarmine.gaが紐づけられているリポジトリの管理者による操作が必要です。
- この方法を選択する場合は2-2-A. Forkして編集をするに進んでください。
- スーパースターマインのOrganizationに所属している人であれば誰でも変更をWebサイトに反映させることができます。
- Websサイトの変更をdev.superstarmine.gaで確認することはできません。
- 現段階ではこの方法は推奨していません。この方法を選択する場合はWebサイトの管理者と相談の上各自で調べるか、今後整備予定の2-2-B. Cloneして編集をするに進んでください。
- WebブラウザでGitHubを開き、GitHubにログインします。
- Webブラウザでdev.superstarmine.gaが紐づけられているリポジトリを開き、画面右上にある「Fork」ボタンをクリックします。
- Forkが完了し、自分のアカウントにコピーされたリポジトリのページが表示されたら緑色の「Code」ボタンをクリックし、Cloneに必要な情報をコピーします。gitコマンドを使用する場合には既に選択されている「HTTPS」のままで、クリップボードのアイコンをクリックしてURLをコピーします。
- コピーした情報を使ってリポジトリをローカルにCloneします。gitコマンドを使用する場合には任意のディレクトリで以下のコマンドを実行します。
bash;git clone $(pbpaste);exit- superstarmine-webというフォルダの中のsrcフォルダの中にあるmain.jsを任意のテキストエディタで開き、編集を行います。書き方は既にファイル内にあるものに従ってください。詳しい構文は情報: main.jsの構文を参照してください。
- Webサイトのビルドを行います。上記の手順で作成したリポジトリのディレクトリまでコマンドライン上で移動してください。
pwdとコマンドを打って表示された結果の末尾にsuperstarmine-webと表示されていれば問題ありません。 - 以下のコマンドを実行します。このコマンドではWebサイトのビルドに必要なファイルをこのディレクトリ内にインストールします。
npm i- 以下のコマンドを実行します。このコマンドではWebサイトをビルドします。
npm run build- Gitで変更をコミットします。コミットメッセージは以下のようにします。
1行目: Edit {編集内容を日本語で簡潔にまとめる}
2行目: {空白行}
3行目: {必要であれば編集の詳細や備考をこれ以降の行に記述する}
- Gitで変更をプッシュします。
- 上記のForkの手順で自分のアカウントにコピーしたリポジトリのページを開き、Pull Requestを作成します。通常であれば画面上半分右寄りに表示されているPull Requestというグレーのリンクが使えるはずです。
- 表示された画面で緑色の「Create Pull Request」ボタンを押します。
- 次に表示された画面でタイトルとコメントを適切に記述した上で、同様の緑色の「Create Pull Request」ボタンを押します。
- Pull Requestが承認され次第、dev.superstarmine.gaでWebサイトの変更を確認できるようになります。必要に応じてdev.superstarmine.gaが紐づけられているリポジトリの管理者に連絡をしてください。
このセクションは未整備です。
main.jsはWebサイト内ほぼ全てのコンテンツを定義しているファイルです。このファイルを編集することでWebサイトの内容を簡単に変更することができます。このファイルを編集する際には以下の構文に従って下さい。 main.jsはその拡張子からも分かる通り、JavaScriptのコードを記述したファイルです。このファイルの構文について正確に理解するにはjavaScriptについての知識を深めて下さい。特に、オブジェクト、文字列、配列、数値、真偽値については最低限よく理解しておいて下さい。
Webサイトのコンテンツはmain.js内で宣言されているapp定数オブジェクト内のpropsメンバーによって定義されています。
- main.js内の以下の場所を参照してください。
app.props.settings.find(setting => setting.title == 'NEWS').contents.articles;- articles配列の先頭に新しくオブジェクトを追加します。既にあるものをコピーするか、以下をコピーして貼り付けてください。
{
title: '',
date: {
year: '',
month: '',
day: ''
},
url: ''
},- それぞれの値を入力してください。title以外の値は必須ではありません。
{
title: 'ニュースのタイトル',
year: '2021',
month: '4',
day: '25'
url: ''
},また、各データの順番についても、可読性を保つために改変しないでください。
- main.js内の以下の場所を参照してください。
app.props.settings.find(setting => setting.title == 'MEMBERS').contents.cards;- cards配列の先頭に新しくオブジェクトを追加します。既にあるものをコピーするか、以下をコピーして貼り付けてください。
{
name: '',
imageId: '',
post: [
'',
''
],
accounts: [
{
name: '',
id: ''
},
{
name: '',
id: ''
}
]
},- それぞれの値を入力してください。name以外の値は必須ではありません。
{
name: 'マチコー',
imageId: 'machiko',
post: [
'リーダー',
'プランナー'
],
{
name: 'twitter',
id: 'MachiCollider'
},
{
name: 'facebook',
id: 'MachiCollider'
},
{
name: 'note',
id: 'machikou_mk2'
}
},- 十分高画質な画像を用意します。
- 用意した画像ファイルをsuperstarmine-webというフォルダの中の
imgフォルダ内に移動させ、わかりやすい名前をつけます。この時のファイル名の拡張子よりも前の部分がimageIdとなります。ただし、メンバーカードのプロフィール写真に使う画像はimg/membersに移動させます。 - superstarmine-webというディレクトリ（フォルダ）にコマンドライン上で移動した上で、以下のコマンドを実行します。
./tools/processimage.sh {追加したファイルへのパス}例えば、foo.pngという画像ファイルを追加した場合は以下のコマンドを実行します。
./tools/processimage.sh ./img/foo.png- 追加した画像を使用したい場所の
imgageIdに、上記で決めたimageIdを設定してください。
Node.jsの環境を準備した上で、リポジトリをフォーク、クローンし以下のコマンドを実行して下さい。
npm -i
npm run devPull Requestを行う際にはその前に以下のコマンドを実行し、コミットとプッシュを行って下さい。
npm run build