自己紹介を追加する - AmusementCreators/WebSite GitHub Wiki

下準備を済ませる

当wikiのHomeにある下準備を済ませてください。

`members.json`を編集する

構成

Cloneしたリポジトリのdata/members.jsonをエディタで開いてください。

[
  {
    "Year": 2018,
    "Members": [
      {
        "Name": "Kaisei Yokoyama",
        "Thumbnail": "/images/space_cat.jpg",
        "Tags": ["Rust","Swift","F#","JavaScript"],
        "Description": "好きな言語は**日本語**です。ケツファイア駆動という先輩の言葉がとても気に入っています。",
        "SNS": {
          "Twitter": "https://twitter.com/KaiseiYokoyama",
          "Github": "https://github.com/KaiseiYokoyama",
          "Link": {
            "Url": "https://kaiseiyokoyama.github.io/blog/",
            "Title": "モダンな言語をたのむ"
          }
        }
      },
      {
        "Name": "AmCrちゃん",
        "Description": "強い静的型付けの言語を信奉しています。"
      }
    ]
  },
  {
    "Year": 2017,
    "Members": [
      {
        "Name": "JavaScriptくん",
        "Description": "学習曲線がゆるやかです。"
      }
    ]
  },
  {
    "Title": "Legend",
    "Members": [
      {
        "Name": "COBOL爺",
        "Description": "基幹システムで生きています。"
      }
    ]
  }
]

上記はmembers.jsonのサンプル構成です。初見では分かりづらいので、疑似コードに直してみましょう(わかりやすさ優先で、ADTは使いません)。

/// members.json
struct Members([Cluster])

/// 入部年度ごとのメンバーの集合
struct Cluster {
  /// YearもしくはTitleのどちらかを指定する
  let Year: Int?
  let Title: String?
  let Members: [Member]
}

struct Member {
  /// 名前(必須)
  let Name: String
  /// 一言(必須)
  let Description: String
  /// サムネイル画像
  let Thumbnail: String?
  /// タグ
  let Tags: [String]?
  /// Github, およびTwitter
  let SNS: SNS?
}

struct SNS {
  /// TwitterのプロフィールURL
  let Twitter: String?
  /// GithubのプロフィールURL
  let Github: String?
  /// その他、ホームページなど
  let Link: Link?
}

struct Link {
   let Url: String,
   let Title: String,
}

パラメータ

【必須】Name: 名前

活動に際して利用する名前を書いてください。

【必須】Description: ひとこと

お好きな一言をどうぞ。Markdown記法が使えます。

Thumbnail: サムネイル

サムネイル画像を設定できます。画像の設定の仕方はこちらを参考にしてください。

SNS

Github,　およびTwitterのプロフィールURLを設定できます。設定した場合、URLへのリンクを持ったアイコンが配置されます。

例

例えば、次のようなJsonオブジェクトを設定しておくと、

{
  "Name": "Kaisei Yokoyama",
  "Thumbnail": "/images/space_cat.jpg",
  "Tags": [ "Rust", "Swift", "F#", "JavaScript" ],
  "Description": "好きな言語は**日本語**です。ケツファイア駆動という先輩の言葉がとても気に入っています。",
  "SNS": {
    "Twitter": "https://twitter.com/KaiseiYokoyama",
    "Github": "https://github.com/KaiseiYokoyama",
    "Link": {
      "Url": "https://kaiseiyokoyama.github.io/blog/",
      "Title": "モダンな言語をたのむ"
    }
  }
},

プレビューおよび実際のウェブサイトでは次のように見えます。

preview_member

追加

それでは実際に追加してみましょう。自身の該当する入部年度のMembersがすでに存在していれば、Members.Membersに自作のMemberを追加してやれば事は済みますが、ここでは上記のmembers.jsonに2019年度入部のVlangくんを追加することを考えてみます。

追加すべきMembersの最小構成は次のような構成になるでしょう。

{
  "Year": 2019,
  "Members":[
    {
      "Name": "Vlangくん",
      "Description": "Simple, fast, safe, compiled language for developing maintainable software."
    }
  ]
}

Vlangくん(および2019年入部者の項)を追加したmembers.jsonは次のようになるはずです。

[
  {
    "Year": 2019,
    "Members":[
      {
        "Name": "Vlangくん",
        "Description": "Simple, fast, safe, compiled language for developing maintainable software."
      }
    ]
	},
  {
    "Year": 2018,
    "Members": [
      {
        "Name": "Kaisei Yokoyama",
        "Thumbnail": "/images/space_cat.jpg",
        "Tags": ["Rust","Swift","F#","JavaScript"],
        "Description": "好きな言語は**日本語**です。ケツファイア駆動という先輩の言葉がとても気に入っています。",
        "SNS": {
          "Twitter": "https://twitter.com/KaiseiYokoyama",
          "Github": "https://github.com/KaiseiYokoyama",
          "Link": {
            "Url": "https://kaiseiyokoyama.github.io/blog/",
            "Title": "モダンな言語をたのむ"
          }
        }
      },
      {
        "Name": "AmCrちゃん",
        "Description": "強い静的型付けの言語を信奉しています。"
      }
    ]
  },
  {
    "Year": 2017,
    "Members": [
      {
        "Name": "JavaScriptくん",
        "Description": "学習曲線がゆるやかです。"
      }
    ]
  },
  {
    "Title": "Legend",
    "Members": [
      {
        "Name": "COBOL爺",
        "Description": "基幹システムで生きています。"
      }
    ]
  }
]

反映

member.jsonの変更をcommitしてpush, 最後にFork元のリポジトリのmasterブランチに対してPull Requestを送信してください。リクエストが承認されブランチがマージされると、Netlifyが静的サイトの生成を始めます。十数秒でウェブページに反映されるはずです。

このあたりの手順は、記事を追加する#Commitする, 記事を追加する#Pushする, 記事を追加する#Pull Requestを送るを参考にしてください。