作った作品をもっとたくさん見てほしい！ごちゃごちゃしたプロフィールを見栄え良くまとめたい！
そんなとき、ProtoPediaを使ってみるのはいかがでしょうか？
みなさんこんにちは。Jinです。お元気ですか？記事の更新が滞ってしまって申し訳ありません。
私は無事進路が決まり、最近はインターンでの開発やProtoPediaへの作品の登録で忙しくしておりました。そんなこんなで参加したHeroes League 2024では、なんとEleMag HarmonyがKOSEN賞を受賞したりもしてました。
そのあたりについては年末年始で記事をたくさん出そうと思いますので、ぜひチェックしてみてください。また、興味がある方はHeroes League 2024 授賞式にて受賞の感想を述べたりしますので、ぜひお越しください。
今回は、ProtoPediaのプロフィールを充実させて屈強なポートフォリオ化させるということで、主にProtoPediaプロフィールについて説明します。
この記事は、「ProtoPedia Advent Calendar 2024」 の18日目の記事となっています。
目次
ProtoPediaってなに？
まず今回この記事に至ったきっかけとして、#ProtoPediaの時間 にて、ばんのー (@about40man) さんにEleMag Harmony を紹介いただいたときに、「プロフィール充実させてて、イイネ！」と褒めてくださったのがきっかけです。
それではそもそもProtoPediaとは何なのかというところから説明します。
公式では、 下のように説明されています。
｢つくりたい」気持ちを大切にしているITクリエイターの、自己表現の場
はじめてのProtoPediaガイド
使っている側とすれば、これはすごくしっくりくる説明ですね。
そもそもものを作るクリエイターは、それぞれ自分の作ったものに対して、他人から見た評価、改善点などを知りたいと思っています。また、クリエイターに限らず一般に人は、面白いものを見ると何かしらコメントしたくなる生き物のはずです。
そしてこの2者の間では、作る -> 見る -> コメントする -> もらったコメントから作品を改良する といった流れができると思います。
これがProtoPediaの理想像だと私は認識しています。というのも、実はProtoPediaでは、「見る」というプロセスが普通のサービスとは違っているのです。
コンテストも兼ねる作品プラットフォーム
「普通のサービス」というのは、例えば技術系のブログではzennやQiitaなど、一般的なブログでいうとwordpressなど、SNSでいえばXやInstaなどです。
これらと比較すると、ProtoPediaは圧倒的にものづくりポートフォリオに向いているサイトだということがある点ではっきりとわかります。
それは、定期的にものづくりコンテストが開催されるというところです。ブログのような作品プラットフォームでコンテスト？と疑問に思う方もいるでしょう。私もかつてはそうでした…
しかし、実際に見てみると言葉通りコンテストが開催されています。まずProtoPediaのページにあるイベントページというカテゴリを覗いてみましょう。
そこには、実際に開催されているものづくりイベントが一覧でズラッと表示されます。そしてその中には、オンラインの形で開催されているコンテスト形式のイベントも数多くあるのです。
それぞれ一つ一つ野中を除くと、イベントの詳細と作品の一覧も見ることができるので、そういったところでも、「作る」と「見る」を繋げる強固なサービスと言えます。
ProtoPedia プロフィールページ
それでは、早速ProtoPediaプロフィールの（自分なりの）充実のさせ方について説明します。見本として、私のプロフィールページをご覧になりながら、作業してもらえるといいかも知れません。
https://protopedia.net/prototyper/jin_neuron
まず、そもそもProtoPediaのアカウントを持ってないよ！って方は、今すぐ作成しましょう。ものづくりをする予定がなくとも、ワクワクする世界があなたを待っています。そしてきっと、ものづくりをしてみたい！と思ってもらえるはずです。
それでは、まず右上のアイコンをクリックし、「プロフィールを表示」を選択して自分のプロフィールページを開いてみましょう。
プロフィールページが開けたら、次に右上にある「内容を編集」を選択して編集していきましょう。
さて、ここからはお楽しみ！プロフィール編集のお時間です。ジャンジャン着飾っていきましょう！
手順として、まずは 表示名 -> SNSリンク（ウェブサイト）の順で埋めていくのがいいでしょう。SNSリンクは下の方に記入できる場所があります。
ここで、それらを入力できたら、一度右上にある「内容を更新」で保存しておきましょう。
次は自己紹介文の記入です。ここがプロフィールページのミソ。そしてなんと、マークダウンでの装飾ができるのです！すばらしい！！
なので私は、自分のGitHubプロフィールからそのままコピーして持ってきました。すごくイイ感じ！そこでここからは、順を追って私のプロフィールなどで使用しているツールについてご説明していきます！
MarkDownでお手軽スタイリング
まず、MarkDownってなんぞや？って方のために、かんたんなMarkDownの説明と、記法についてお話しておきます。
まず、MarkDownについてです。すでにフロントエンドで開発をしたことがあるウェブプログラマーや、ゴリゴリのウェブデザイナーであれば、想像は容易いのではないでしょうか。
MarkDownの逆にMarkUpというものがあります。このウェブページも、MarkUpの部類に入ります。MaruUpとは、htmlやcss、Latexのようにタグを使って文章を装飾するものを言います。
例えば<h1>タグが大見出し、<p>タグが段落、<ul>タグがリスト、のようになります。だけどこのMarkUp、わざわざタグで装飾箇所をくくらないといけないので、なかなか面倒くさいですね…
そこでMarkDownです。”#”や”･”、”**”のような記号を、テキストの行頭に配置することで、 かんたんに装飾ができます。 太字や斜体、取り消し線のようなテキストの一部の装飾は、該当箇所を囲う必要がありますが、それでもhtmlに比べると圧倒的に楽です。
ここでは、ProtoPediaプロフィールページで使えるマークダウンをいくつか紹介します。
- 見出し – #
# の個数によって大きさの変更が可能 - リスト – *+Space
アスタリスクとスペースでリスト化できます。インデントなども自動で調整してくれます。 - 太字 – **
**あ** のように、アスタリスク2つで装飾箇所を囲うことで、太字化できます。
また、アンダーバーでも可能なようです。 - 斜体 – *
*あ*のように、アスタリスク1つで装飾箇所を囲うことで、斜体にできます。
また、アンダーバーでも可能なようです。 - コード – `
チルダで囲うことで、該当箇所をプログラムとして自動で調整してくれます。 - 引用 – >
大なりで引用とすることができます。 - リンク – [link text](link)
括弧の中にそれぞれリンクテキストとリンクを入れることで、リンクを挿入できます。
また、リンクの先頭に ! をつけると、画像を読み込めます。
これはDiscordやSlackの投稿時のテキストボックスでも使用できるので、覚えておくと非常に便利でしょう。
GitHub ステータスの表示させてみよう
それでは中身に入っていきましょう。githubのアカウントを持っていて、結構使うよ！って人は、ステータスを表示させるといいかも知れません。
まず、フォロワーやプロフィールのビューのバッジを作ってみましょう。こちらは、下のリポジトリを使用しています。
https://github.com/antonkomarev/github-profile-views-counter
リンクとしては、下のように使用します。’your-github-username’には自分のGithubのユーザーネームを入れましょう。
フォロワー、スターなどのバッジは、shelds.ioから作成可能です。
https://shields.io/badges
私は、以下のコードでフォロワーとスターのバッジをつけています。
ステータスやグラフのカードは、以下のリポジトリを使用します。
https://github.com/vn7n24fzkq/github-profile-summary-cards
特に私が使っているものは、以下の3つです。順番に、コミットのステータス、よく使われている言語、ユーザーのステータスとなっています。
蛇のアニメーションが動くコミットステータスを追加する方法もあります。こちらは、github上でのactionの実行が必要になるので少々面倒くさいですが、以下の記事で詳述されているので、気になる方はぜひ！
Qiitaより
ちなみに、ProtoPediaのバッジは下の記事で追加方法が詳しく記されているので、確認してみてください！
https://protopedia.net/prototype/3701
DEVICONでスキルをアピールしてみよう
まだまだ続きます。続いては、DeviConというツールを使い、自分の使うプログラミング言語や、エディターなどをアピールするところです。
DeviConは、技術系ツールでたくさんのアイコンが提供されており、svg形式の画像でリンクを取得することができます。
私のプロフィールページでは、これらのsvg画像を、htmlの<img>タグを用いて、マークアップで表示させていますが、次のようにマークダウンでも表示自体は可能です。
ただ、マークダウンの弱点として、画像のサイズを指定できないところがあるので、これに関しては次のようにマークアップを使用してみるのが良いかも知れません。
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/raspberrypi/raspberrypi-original.svg" width="40"/><img>タグの使い方についてなどは省略させていただきますが、上のコードからリンクを各アイコンのものに変更したり、widthに幅を指定したりするだけで、イイ感じな表示はできると思いますので、是非参考にしてみてください。
Spotifyの履歴を表示させよう
さて次はもはやおまけ。Spotifyを使っているユーザーであれば、自分が再生している曲や履歴など公開してみたくなるものでしょう。そしてなんと、そんな要望を満たすオープンソースコードが世の中には存在します。ありがてぇ…
まずは一番最近で再生した曲をいい感じのアニメーション付きで再生させてみましょう。
こちらは、下のリポジトリから”Connect With Spotify” を選択してSpotifyを連携させ、テーマなどをカスタマイズするだけでかんたんに貼り付け可能です。
https://github.com/kittinan/spotify-github-profile?tab=readme-ov-file
次に、最近再生した履歴から5曲分を表示させてみましょう。
こちらも上記同様、下のリポジトリから”Authorize”をクリックして連携させ、テーマなどを選んでコピペで修了です！！ｶﾝﾀﾝ！
https://github.com/JeffreyCA/spotify-recently-played-readme?tab=readme-ov-file
作品を登録しよう
さて、これまでは自己紹介文のカスタマイズについて長々と書いてきましたが、そもそもProtoPediaのメインの使い方は、作品を登録することです。
そしてもちろん、登録した作品はプロフィールページから閲覧できるだけでなく、コンテストで受賞した作品には「win!」の表示がついたりと、色々と嬉しいことづくしですね！
作品の登録時に用意しておいたほうが良い点は以下のつ。
- 画像
5枚まで登録可能です。いろいろな角度からの画像があるといいと思います！ - 動画
動画は特にHeroes Leagueのオンライン審査などにも使われますので、登録しておくだけで今後コンテストへ参加するときが楽になるので、オススメです！ - 作品ページ
大きな作品であればあるほど、仕組みを長々と書くのは厳しいので、別途ブログなどにまとめてリンクを掲載する形を取るとスマートでキレイです！
この他にも、概要、システム構成、ストーリーなどたくさん記載できるスペースがありますが、一度に全部入力するのは大変です。
そんなときのために、ProtoPediaには下書き保存という便利な機能がありますので、時間ができたときにちょくちょく入力という感じで作品ページを仕上げていくのが良いと思います！
まとめ
いかがでしたか？今回は、「ProtoPedia Advent Calendar 2024」 の18日目の記事として、ProtoPediaのプロフィールを程よく充実させて、屈強なポートフォリオへ発展させるところについて説明させていただきました。
みなさんも、ものを作り、ProtoPediaに登録し、プロフィールページを輝かせてみてはいかがでしょうか！
それでは、次の記事でお会いしましょう〜！GoodBye！！