べこのツボ

これ押すとアイデアが出てくる(理想)

制作中のポートフォリオサイトについて思っていること

f:id:damdom:20170914233249p:plain

個人ポートフォリオサイト制作+技術書執筆を進めています。プロジェクトしろくまという名前をつけている。

始めたきっかけはがっつり技術つかって胸を張って公開できるWebのものを作ってみたかったのと、 もし誰かもそういう気持ちでやってみたいけど情報まとまってないしな〜って人に読んでもらいたいのかもしれない。

Vue.js は全然日本語ドキュメント充実してるけど、私くらいの低レベル層だとそれすら読んで写経してみても自分で自由に何か作れるレベルじゃないっていう。

どこまで専門的な説明するかっていうところは、ぶっちゃけアホだから完璧に突き詰められないので、どういうものを作りたいか(今回はポートフォリオサイト)を目標に、それを完成させるまでの道のりと説明って感じで行こうと思う。多分専門家からすればマサカリすら投げられないレベルの…

昨夜から悩んでいて、朝起きてわさわさ作業していたときに答えが出た。作ってるうちに視界が狭くなって不安になって立ち止まってしまうパターンにはまってた。

今日の帰り際に職場の人から「結構 Vue.js 使ってますよね。」って言われたけど(オンオフの境目減らそうとしてるので普通にリポジトリの URL とかシェアしてる)、ポートフォリオサイトの SPA の Vue.js の使い方は本業の使い方と違うので、使いみち広すぎて逆にすごいという気持ちを抱いてる。

【本】流れ · Issue #4 · becolomochi/shirokuma · GitHub

技術書典3 で販売する予定の本の流れはこんな感じを考えてる。

Node.js npm の説明から始まって(お約束的な)、vue init で楽めに初めて、vueテンプレートの分け方とか、ルーティングとか。他はサイトとして成り立つようにお問い合わせフォームつけたりタイトルの設定をできるようにしたりとか。こんな感じだと HTML/CSS は基本的に書けて、JS もちょっとわかるくらいの人が読める本になりそう。

これまでのしろくま関連の記事(新しい順)

becolomochi.hatenablog.com

becolomochi.hatenablog.com

becolomochi.hatenablog.com

リポジトリ

GitHub - becolomochi/shirokuma

ポートフォリオサイトの制作のこと

以前から進んだり止まったりしていた「プロジェクトしろくま

f:id:damdom:20170910105453p:plain

流れに流れて、個人ポートフォリオサイト制作+技術書執筆になりました。

何しようか迷っていたときの記事。

becolomochi.hatenablog.com

becolomochi.hatenablog.com

じぶんのこれまで

  • ここ数年の担当はデザインとコーディングとjQueryでDOM操作を少し
  • そろそろJSでもう少し複雑なことがしたいと考えていた
  • 将来個人的に仕事を得るために、自分がどんな気持ちでどんなことをやってきたかを伝えるものも作ってみたかった

具体的に

  • 使ってみたかったVue.jsのSPAで作ってみている
  • お問い合わせフォームはGAS
  • GitHubで進捗を報告

少しずつやっています。

f:id:damdom:20170910110056p:plain

技術面が不安だったので先にページ作成をしてみた。デザインはこれから。

  • スケジュールではPDF販売になってしまいそうだけど、きちんと見せられる形に仕上げるぞ
  • 10月22日に秋葉原で開催される技術書典3で販売予定です

技術書典

技術書典3

「ITや機械工作とその周辺領域について書いた本」の即売会です。

  • 日時:2017年10月22日 (日) 11:00〜17:00
  • 場所:アキバ・スクエア
  • 主催:TechBooster/達人出版会
  • 一般参加 無料

リポジトリ

作ったものはこちらです。

GitHub - becolomochi/shirokuma

私とesaとREADME

f:id:damdom:20170708213121p:plain

ちょっとふっくらしたトリちゃん。

ひとりesa(読み:エサ)やっています!! 主にesaのREADMEに自分が書いていることを書きます。

esaとは🐣

esa.io

esa.io は「情報を育てる」という視点で作られた、 自律的なチームのためのドキュメント共有サービスです。

esa.io トップページより)

\ひとりでもチーム!!/

READMEとは🔖

esa🐣には、記事のタイトルを「カテゴリ名/README」という感じにすると、それぞれのカテゴリのトップページになる機能があります。 カテゴリなしのREADMEはログイン後にすぐ見ることができるトップページになります。

esa の README に書いているもの

毎日見ておくと良さそうなものを書いたらよいかもしれない!と思ったので以下のことを書いています。

  • 堂々巡りしやすい考え方
  • 直近の目標・将来的な目標・やりたいこと・できること

ぱっと見ることができるように短めの文章にしています。

ちょっと話がずれますが、esaで日報を書く癖がやっと定着してきました。最初はやったりやらなかったりだったのですが、ここ2ヶ月くらいはほぼ毎日書けてるかも。毎日、日報を書くことで内省*1の時間がとれるので、良い感じの日々のサイクルになっています。

堂々巡りしやすい考え方

これまで昔出した答えを忘れたまま内省してしまうので、毎日目に触れる場所に置いておくことで、気づきを早くし負のループから浮上できるようにしています。こちらは箇条書き。

直近の目標・将来的な目標・やりたいこと・できること

目標に向かってブレずに進んでいるかチェックしながらざーっと読み返します。これは表形式にしていて、短期的な目標と長期的な目標は分けて書くようにしています。
やりたいことやできることも言語化しておいて、身の回りにチャンスがあったときにしっかり掴めるようになりたい!と思っています(ここはもう貪欲に👀

どちらも少しずつ内容をアップデートしています。

( ⁰⊖⁰) ←かわいい

esaにはもっと便利な高機能もあって超すごい!超便利!なのですが、自分の使い方を書きました。

マークダウンで書きやすく、UIも使いやすくて、どんなことでも気のむくまま書けるのがいいですね。内省や日報以外だと、職場でやったことや個人活動のことなども書いています。あとアプリやサイトのUIの使いやすさをメモしたりとか。

チームで使ってる人がうらやましい〜〜〜
以上です

*1:自分の考えや行動などを深くかえりみること。反省。「過去を内省する」コトバンク

2017年6月にやっていたこと。

f:id:damdom:20170702221648j:image

iPad ProとApple Pencilを入手したので試し書き。 

 

6月は個人制作がひと段落し、本業(Webデザインとコーディング)が忙しくなってきたので本業をサポートするような学び方面のことをやっていました。

 

Webデザインの情報収集

Feedlyでデザインギャラリーサイトを複数登録して、サムネ表示にして一覧で見られるようにする。デザインにつまづいたときにざーっと眺める。
自宅でお手本サイトをトレースして文字や余白でのメリハリのつけ方を学ぶ。

 

UIのチェック

普段使っているサービスで、使いやすい/使いづらいと感じたところをメモする。

こちらのスライドを参考にさせてもらっています。
https://speakerdeck.com/ietaka/dezainaga3keyue-jian-mei-ri-sok-keteirumian-qiang-fa-togan-ziteirubian-hua

 

コードを書く

といっても今できるのがHTML/CSSなのでスタイルをまとめたものを作っている。できる範囲がはっきりわかるので勉強しやすくなりそう。

 

英語

技術系の英語記事を読む。

 

それぞれを毎日やれるのが理想ですが、ちょっと無理があったので余裕があるときにこの中からやりたいことを選んでやっている感じになっています。

ダムZINE2作目買えるようになりました

f:id:damdom:20170512214111j:plain

ダムZINE2作目「DAM ZINE」(タイトルです。ややこしいね)はこちらで取り扱っていただいています。

zine.mount.co.jp

店頭にも置いてもらっています。

MOUNT Tokyo
東京都目黒区八雲2-5-10 [東急東横線 都立大学駅 徒歩6分]
Open: 木・金・土・日(12〜19時)
素敵なZINE専門店なのでぜひお出かけください。

内容は?

説明+写真+イラストです。ただ行ってもつまらないのでどこをみたら楽しいかがわかるような内容にしました。私の主観でダムを飲み物に例えたりもしています。考えるの楽しかったなー
詳細はこちらをご覧ください。

becolomochi.hatenablog.com