Slide 1

Slide 1 text

執筆の種蒔き用にしているインプットでの心掛け 執筆の技術を勉強する会 #2 2024/02/15 Fumiya Sakai

Slide 2

Slide 2 text

自己紹介 ・Fumiya Sakai ・Mobile Application Engineer アカウント: ・Twitter: https://twitter.com/fumiyasac ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github 発表者: ・Born on September 21, 1984 これまでの歩み: Web Designer 2008 ~ 2010 Web Engineer 2012 ~ 2016 App Engineer 2017 ~ Now iOS / Android / sometimes Flutter

Slide 3

Slide 3 text

iOSのUI実装本を執筆しています! 書籍に掲載したサンプルのバージョンアップや続編等に現在着手中です。 少しの工夫で実現できるTIPS集やライブラリ表現の活用集をはじめとした、iOSア プリ開発の中でも特にUI実装やUIKitを利用した画面の中で特徴を与える様な表現 という題材に焦点を当てた書籍となっております。 現在は電子書籍版のみとなります。 こちらは全て¥1,000となっております。 https://just1factory.booth.pm/ 概要: https://book-tech.com/ 価格: 📖 Booth 📖 Book Tech

Slide 4

Slide 4 text

UI実装であると嬉しいレシピブックの最新情報 UI実装であると嬉しいレシピブックVol.3として昨年10月に商業化しました! Still WIP これまでの同人誌として頒布したものに加えて、Vol.1及びVol.2に頒布したものの 中で書籍に載せきれなかったものや表現や動きが特徴的でユーザーにもほんの少し 遊び心を与える様なUI実装を紹介したものをVol.3としています。 概要: これからの構想: こちらで購入可能です: Amazon / Google Play / Apple Books / KINOKUNIYA / Rakuten BOOKS etc.. 🏊 iOS: SwiftUIを利用したUI実装や動画関連の実装 🏊 Android: Jetpack Composeの基本やその他気になるUI表現の考察

Slide 5

Slide 5 text

今回のスライドにつきまして いつかの執筆活動や寄稿等に繋げるためのアウトプットに関する工夫をご紹介 これまで自分がしてきた取り組み事例の紹介になりますが、お付き合い頂けると嬉しいです。 1. 小さな調べ物を自分の言葉で言語化してみる: 平素の業務内や個人的な開発のためにインプットのために「小さな調べ物をする機会」から始まると思います。 小さな調べ物を繰り返して試行錯誤をした過程を自分の言葉で表してみる事がアウトプットの第1歩目になるはずです。 2. 普段から実装や知識の簡単にまとめて図式化してみる: 言葉だけで説明しようとするとイメージが伝えにくい場合や必要以上に説明が長くなる場合もあるかと思います。 自分がよく実践している事ですが、画面遷移や全体概略図をはじめ図解にしてまとめた事例を交えてお話しできれば幸いです。 3. コミュニティ活動や社内部活動などの活動に身を置いてみる: 昨年からは「技術書同人誌博覧会でのデザイン協力スタッフ」としての活動や「社内の部活動」等の機会で寄稿やアウトプット をする事ができました。その中で皆様の執筆活動を支援する活動をするモチベーションについても触れられればと思います。

Slide 6

Slide 6 text

インプットした内容を自分の言葉で言語化するメリット 本当に理解ができているか?を確認する事ができる指標にもなり得る 未知のタスクに着手する 前にまず始めること 日頃のタスクをこなす中にもドラマ有り: コードと共に周辺技術の理解を広げる 関係性を繋げていく際に言語化する コードを読んで理解を深めていく事は前提ではあるが、コードを取り 巻く環境(インフラ・ミドルウェア・CI・ツール等)についても基礎 知識をインプットする様にすると有機的に理解するヒントになる。 得られた知識を関連づけて能動的に理解を深める 知識整理を脳内で実施するためにまずは自分の言葉で表現してみる 個々の事象が言葉によってうまく繋がった時に理解が深まる。そうす る事で最初は「なぜ?」となっている部分が明確になる。 ・専門用語や名称の理解 ・現在状態の仕様把握 ・インフラ/ミドルウェア構成 ・影響を受ける範囲調査 タスク完了・理解に必要なものを整理 現状把握に必要な材料 ・業務やドメイン理解 ・技術に関する理解 改修内容の設計 ・影響範囲と詳細の見極め ・かかり得る工数の算出 ・必要性の理解 ・コード&周辺技術調査

Slide 7

Slide 7 text

僕が個人的に考えている理想的なサイクル この様なサイクルができればドキュメントもアウトプットも楽しくなるはず 1. 業務内で必要そうなドキュメントをまとめる: 2. ドキュメントの前段情報をストックする: 最近はなかなか自分も実践できずじまいで申し訳なく思っています…すみません View要素から実行された Actionを発行する 知識をインプットする際 はまずは雑でもノートへ ・コードレビューの記録 ・会議中の内容のサマリ ・複雑な機能の予習 まずはInternalな資料と して要点をまとめていく できるだけ業務時間内に インプットの機会を作る 社内Wiki・公開情報 として知見を公開する ツールやスタイルは使い慣れたものを利用 アウトプットの第1歩が平素のインプットになる事が多いです インプットからアウトプットへ昇華していく段階に途中をはさむ事に よって書きやすくしている。文章だけでは説明しにくい点をいかに図 解としてまとめるかも考える様にしています。 ・業務ではNotionと手書きノートを利用する ・ツールによって棲み分けをすると良い ・ある程度まとまれば記事やブログへ

Slide 8

Slide 8 text

私の場合は良く自分のノートを活用しています(1) 勉強会の記録やサマリについても共有等の目的でまとめる場合もあります

Slide 9

Slide 9 text

私の場合は良く自分のノートを活用しています(2) 登壇内容をYouTube等で聞きつつ資料や当時のタイムラインの情報をまとめる 特に直近で業務に関連しそうなトピックについては重点的にノートに改めてまとめる様にしています: https://twitter.com/fumiyasac/status/1385918935841734661 https://twitter.com/fumiyasac/status/1409493338969960453

Slide 10

Slide 10 text

私の場合は良く自分のノートを活用しています(3) 資料や記事に掲載する図解のイメージも込みで書いていく点が個人的なポイント 登壇資料や執筆記事を作る前の段階で盛り込みたい内容を整理しておく:

Slide 11

Slide 11 text

私の場合は良く自分のノートを活用しています(4) 直感で正しいと思える解答と論理的に正しい解答が異なってしまう例 iOSDC Japan 2022パンフレット原稿 : https://github.com/fumiyasac/iosdc2022_pamphlet_manuscript 残りのカードを良く切ってから3枚抜き出した ところ、3枚ともダイヤであった。 1つ選んだ後に抜き出したカードの枚数とその 時に選ばれたダイヤの枚数が等しい場合にお いて、枚数が変化したならばその確率が変わ る点です。 この問題におけるポイント 条件付き確率の問題である事に注意: 平素の開発でもこの様な経験はないか? 図解等でまとておく事で実は更に考慮すべき ポイントに気が付ける場合もありそうです。

Slide 12

Slide 12 text

私の場合は良く自分のノートを活用しています(5) まずは基本事項の整理からUI実装やiOS開発と類似&相違点に焦点を当ててみる 業務内でAndroidアプリ開発に初めて携わった際の予習&Flutterを興味から自分で調査した際の記録: 僕が業務で初めてAndroidアプリ開発に着手して2ヶ月程経 過した中での振り返り: https://note.com/fumiyasac/n/nec1c3c80f12d Androidアプリ開発やFlutterの基礎学習をノートと一緒に 振り返る: https://note.com/fumiyasac/n/n0acb2bd76b64

Slide 13

Slide 13 text

理解が複雑で難しい部分をアプローチする図解例(1) iOS/Android間における特徴の差異を同列に並べてまとめてみた例

Slide 14

Slide 14 text

理解が複雑で難しい部分をアプローチする図解例(2) Reduxの処理機構をSwiftUIベースのプロジェクトで実現した際のサンプル図解

Slide 15

Slide 15 text

理解が複雑で難しい部分をアプローチする図解例(3) 設計方針を言葉と合わせて整理したり処理フローのイメージを表現する図解

Slide 16

Slide 16 text

理解が複雑で難しい部分をアプローチする図解例(4) GraphQL Client「Apollo」をバージョンアップした際の振り返りをまとめる

Slide 17

Slide 17 text

個人的な活動から執筆(寄稿)に繋がった事例紹介 昨年にDroidKaigi2023でContributionをした経験を寄稿しました UI上での振る舞いや現在のUI構造における調整対象箇所の概要を言語化する: 設計2: https://twitter.com/fumiyasac/status/1695835586719044047 設計1: https://twitter.com/fumiyasac/status/1693501752811917546 CoodinatorLayoutの様な動き 検索ハイライト機能

Slide 18

Slide 18 text

DroidKaigi2023でContributionした要点の再現サンプル https://github.com/fumiyasac/LikeCoodinatorLayoutExample LikeCoodinatorLayoutExample: Movie Capture Post (X): https://twitter.com/fumiyasac/status/1704859590016590043 UI実装関連の調整対応部分については簡単に動くものを作成して再度復習する

Slide 19

Slide 19 text

UI実装を実現する場合におけるポイントを図解にする iOS/AndroidにおけるUI実装は同じに見えても考え方や方針が異なる場合が多い

Slide 20

Slide 20 text

執筆コミュニティとの関わりや関連するアウトプット モチベーションを上げる動機に加えて自分のアウトプットを増やしたい思い 2023年に取り組んだコミュニティ活動 : ① 技術書同人誌博覧会の次回案内チラシのデザイン : ② 会社での有志による合同誌 & iOSDC2023への寄稿 : 参加頂いた皆様にもデザインが好評で嬉しい気持ちでした! iOSDCは毎年やっている & 合同誌も個人執筆同様にやっていき!

Slide 21

Slide 21 text

まとめ 執筆をした経験が業務・個人問わず活きる瞬間は数多くあった様に思います。 1. 小さなインプットが積み重ねがアウトプットに繋がってくる: 最初からいきなり大きなアウトプットを試みようとすると敷居が高く感じてしまう事も多いと思います。 記事という単位で最初はなくとも、少しずつで構わないので自分の言葉で細かくまとめる所から始めると良さそうです。 2. 情報を「見える化・整理」をする習慣をつけると嬉しい事がたくさんある: 業務で取り組んだ実装やコードレビューを実施した内容で興味・関心を持った部分をもう一度復習する様なイメージで図解やド キュメントでまとめる作業に慣れると、執筆をする場合においてもこのスキルを十分に活用できると思います。 小さなインプットを大切にした先に執筆や寄稿等の大きなアウトプットに繋がっていくと思います。 3. コミュニティへの参加やアウトプットを応援する場へのコミットも貴重な機会: 1人では筆が重かったり作業が捗らない事は僕自身も良くありましたが、コミュニティの皆様にモチベーションを頂く事も多々あ りました。コミュニティへの協力や同人誌作家へ寄稿といった形でのコミットも有意義な機会だと考えています。

Slide 22

Slide 22 text

Thank you for listening ! 2024/05/05までに執筆が達成できる様に僕も頑張ろうと思います。 そして今年は執筆&個人開発どちらもやっていきです! 「テックブログはシングル、勉強会登壇はライブ、執筆した技術書はアルバム」