URL : https://denkoken.github.io/
srcディレクトリ内のReactJS
で書かれた.jsxファイルと、configディレクトリ内の設定用.jsonファイルを
Webpackにより、
main.bundle.jsとbundle.cssにまとめて
docsディレクトリに出力、masterブランチにpushすることで
Webページが公開されます。
# 必要パッケージのインストール
npm install
# 開発用ビルド
npm run watch
# 本番用ビルド (このコマンドを用いてコンパイルしたものをpushしないでください)
babel-node ./node_modules/webpack/bin/webpack.js --config webpack.prod.js
# main.bundle.js解析
npm run analyze
# Webページアップロード (必要なら本番用ビルドも走ります)
npm run publish
# または
babel-node publish.js
記事は.jsonファイルで管理されます。
記事の追加後はnpm run publishを実行してgitにcommitしてください。
該当する.jsonファイルや画像ファイルを変更してもwebpackでbuildする必要はありません。
以下のように記事を並べると複数の記事となります。
{
"kizi_1": {
...
},
"kizi_2": {
...
},
"tokusyu_na_kizi": {
...
},
...
"iten_no_oshirase": {
...
}
}
各記事のパラメータは以下の通りです。
| key | value type | description |
|---|---|---|
title |
String | 記事のタイトル |
body |
Array of String | 記事の本文。Markdownでかけます。見やすさのためにArrayとなっていますが、全て連結されるのでどこで区切っても変わりません。 |
src |
String | headerとなる画像のパス。著作権フリーの画像を使いましょう。 |
{
"main": {
"title": "超電子工学研究会",
"body": [
"<h4>",
"慶應義塾大学公認団体 超電子工学研究会, ",
"通称電工研のホームページです.<br>",
"詳しくは <a href=\"./?topic=about_us\">電工研について</a>",
"をご覧ください.<br>",
"また、新歓情報は<a href=\"./?topic=shinkan\">こちら</a>",
"で公開中です.",
"</h4>"
],
"src": "img/index.jpg"
}
}
config/internal_paths.jsonで管理されます。
今は以下の通りになっています。
| 場所 | key | デフォルトのpath(書き換えられます) |
|---|---|---|
| トップページ | index |
data/article/index.json |
| 電工研について | about_us |
data/article/about_us.json |
| 告知 > 新歓情報 | shinkan |
data/article/shinkan.json |
| 告知 > 三田祭情報 | mita |
data/article/mita.json |
| 告知 > 矢上祭情報 | yagami |
data/article/yagami.json |
| 制作物 | work |
data/list/work.json |
設定ファイルはconfigディレクトリに.jsonファイルとして配置してあります。
Webページの基本的な設定用のファイルです。 変更を反映するにはリビルドが必要です。
必要なパラメータは以下の通りです。
| key | value type | description |
|---|---|---|
name |
String | Webページのタイトルに表示される文字列です |
footer |
dict | Webページのフッターに表示される文字列です。フォーマットはfooter.name ©footer.yearです |
load_json_failed |
String | jsonデータの動的読み込みに失敗したときに表示される文字列です |
github_url |
String | 取得すべきデータが配置されているgithub上のルートパスです |
default_image_url |
String | 記事やリストでヘッダ画像の指定がなかったときに表示される画像のdocsディレクトリからの相対パスです |
Webページのクエリ文字列においてtopicで指定された値と読み込むべき
.jsonファイルのdocsディレクトリからの相対パスの対応を
クエリ文字列による値をkey、パスをvalueとした
dict型で記述したファイルです。
クエリ文字列により指定される値の種類は後述のconfig/menuitem.json
を参照してください。
変更を反映するにはリビルドが必要です。
Webページのヘッダに表示されるメニューバーの項目の設定です。
メニュー項目を指定するdictのdictになっています。
後述するメニュー項目のパラメータ、typeがinternalのときは必ず
メニュー項目のkeyとしてconfig/internal_paths.json
と共通のものを指定してください。
変更を反映するにはリビルドが必要です。
メニュー項目を設定するパラメータは以下の通りです。
| key | value type | description |
|---|---|---|
label |
String | メニュー項目に表示される文字列です |
icon |
String | メニュー項目に表示されるアイコンを指定する文字列です。アイコンの種類についてはこちらを確認してください。 |
type |
String | メニュー項目選択時の挙動を指定します。詳しくは後述 |
path |
Strinh | 後述のtypeにて説明します |
child |
dict | サブメニューとなるメニュー項目のdictを取ります。ネストの深さは1まで可能です。この項目が設定された場合のみtypeの設定は不要です |
success |
String | typeにclipboardが指定された場合のみ可能です。クリップボードへのコピーが成功したときに表示する文字列です |
failed |
String | typeにclipboardが指定された場合のみ可能です。クリップボードへのコピーが失敗したときに表示する文字列です |
パラメータtypeには次の3つが指定可能です。
internal: 内部リンクexternal: 外部リンクclipboard: クリップボードへのコピー
internalは選択されたメニュー項目のkeyに対し、
./?topic=keyへのリダイレクトを行います。
externalは選択されたメニュー項目のpathで指定されたURLを
新しいタブで開きます。
clipboardは選択されたメニュー項目のpathで指定された内容を
クリップボードにコピーします。
publish.jsで実行される処理の設定ファイルです。
詳しい処理内容については後述のpublish.jsを参照してください。
利用可能なパラメータは次の通りです。
| key | value type | description |
|---|---|---|
list |
list | 記事を配置するディレクトリとその記事を含む記事一覧の組を表すdictのlistです。dictのフォーマットは後述 |
update |
dict | 変更されていた場合にgit addするファイルを指定します。dictのフォーマットは後述 |
rebuild |
dict | 変更されていた場合にリビルドを実行しgit addするファイルを指定します。dictのフォーマットは後述 |
bundle |
list | publish.jsが実行された結果リビルドが行われた場合新たにgit addされるファイル一覧を指定します |
パラメータlistが持つべきパラメータは次のとおりです
| key | value type | description |
|---|---|---|
dst_path |
String | 記事一覧のデータが格納されるjsonファイル |
src_dir |
String | 記事一覧に追加するファイルが格納されるディレクトリ |
パラメータupdate, rebuildが持つべきパラメータは次の通りです。
| key | value type | description |
|---|---|---|
dir |
list | このlist内のディレクトリ内のファイルすべてが処理を実行する対象となる |
file |
list | このlistに記述されたファイルが処理を実行する対象となる |
except |
list | このlistに記述されたファイルはdirで指定したディレクトリ内にあっても処理は実行されない |
publish.jsは変更したファイルのeslint、git addやeslint、
また記事一覧の作成などを必要に応じて行うスクリプトです。
実行にはbebel-cliが必要となります。
config/publish.jsonで指定したファイルに対しそれぞれ次の処理を行います。
- 以前のcommit以降変更または追加のあったファイルについて、
list,update,rebuildの対象であるものを抽出します。 - 抽出したファイルの内、
.js,.jsxファイルに対しeslintを実行します。 eslintに失敗した場合処理はここで終了しますので、 ソースコードの修正を行ってください。 list対象のファイルに対し、記事一覧のjsonファイルに タイトル、現在日時、パスを追加します。 また、記事一覧のjsonファイルもgit addの対象に加えます。rebuild対象のファイルが存在する場合、webpack.prod.jsの設定を使用して リビルドを行います。この処理には1, 2分程度の時間がかかります。 また、bundleで指定したファイルをgit addの対象に加えます。 Webpackに失敗した場合処理はここで終了しますので、 ソースコードの修正を行ってください。list,update,rebuildで指定したファイル及びgit addの対象に追加された ファイルに対しgit addを実行します。- commitします
masterブランチにプッシュします。pushにユーザー名、パスワードの入力が不要な状態にしておく必要があります。pushにユーザー名、パスワードの入力が不要な状態にしておくことを推奨します。
処理の終了後は念の為git showなどで最新のcommitを確認してください。
npm run publishを実行し新たに記事が更新された場合、
config/twitter.jsonを適切に設定しておくことで
電工研のTwitterアカウントで自動ツイートすることが可能です。
Twitterアカウント不正アクセス防止のため、
git cloneしただけでは有効化されません。
config/twitter.jsonの設定は以下のとおりに行ってください。
- こちらにアクセスし、 電工研のTwitterアカウントにログインする。
- 表示されたページを見て、次のとおりに
config/twitter.jsonを入力する。comsumer_keyに"Comsumer Key (API Key)"として表示された文字列をコピーcomsumer_secret_keyに"Comsumer Secret (API Secret)"として表示された 文字列をコピーaccess_token_keyに"Access Token"として表示された文字列をコピー (改行不要)access_token_secretに"Access Token Secret"として表示された文字列を コピー
- 適宜
contentを編集してホームページ更新時の文言を変える。
ツイートは次のようなフォーマットでなされます。
${
config/twitter.jsonのcontentに書かれた内容} ${更新されたページのURL}
Linterとしてeslintを使用します。
設定ファイルは.eslintrc.jsonです。
eslintが通っていないファイルのpushを防ぐため、
可能な限りpublish.jsを介したアップロードを行ってください。
ReactJSとともに用いるUI Componentとして Ant Design of Reactを使用しています。