├── backyard ├── CODE_OF_CONDUCT.md ├── FOR_BOOTH_OWNER.md ├── FOR_SESSION_SPEAKER.md └── README.md ├── goods ├── parker │ ├── ラフ確認用 │ │ ├── parka_zip_ura.ai │ │ ├── parka_zip_ura02.png │ │ ├── parka_zip_ura03.png │ │ ├── parka_zip_ura04.png │ │ ├── parka_zip_ura05.png │ │ ├── parka_zip_ura06.png │ │ ├── parka_zip_ura07.png │ │ ├── parka_zip_ura08.png │ │ └── parka_zip_ura1.png │ ├── 元データ │ │ └── parka_zip_ura_white.ai │ └── 入稿用 │ │ └── parka_zip_verCS 2 │ │ ├── Attention.pdf │ │ ├── parka_zip_omote.ai │ │ ├── parka_zip_ura.ai │ │ ├── parka_zip_ura_darkGreen.ai │ │ ├── parka_zip_ura_white.ai │ │ └── parka_zip_ura_ラフ.ai └── poster │ ├── 元データ │ ├── IFposter_AMA.ai │ └── IFposter_SEMINAR.ai │ └── 入稿用データ │ ├── 0221_IFTimetable_AMA.ai │ ├── 0221_IFTimetable_AMA.pdf │ ├── 0221_IFTimetable_SEMINAR.ai │ └── 0221_IFTimetable_SEMINAR.pdf ├── issue-structure.md └── topics ├── ama-booth ├── C1-yahoo-a11y │ ├── README.md │ └── slide │ │ └── list-of-urls.md ├── C2-herablog-perfmatter │ ├── README.md │ └── slide │ │ └── list-of-urls.md ├── D1-jxck-pwapps │ ├── README.md │ └── slide │ │ └── list-of-urls.md ├── D2-hiloki-css │ ├── README.md │ └── slide │ │ └── list-of-urls.md ├── E1-yhassy-ux │ ├── README.md │ └── slide │ │ └── list-of-urls.md └── E2-yahoo-react │ ├── README.md │ └── slide │ └── list-of-urls.md └── session ├── A1-yahoo-a11y ├── README.md └── slide │ └── list-of-urls.md ├── A2-nikkei-polyfill ├── README.md └── slide │ └── list-of-urls.md ├── A3-herablog-ameblo ├── README.md └── slide │ └── list-of-urls.md ├── A4-kyo_ago-test ├── README.md └── slide │ └── list-of-urls.md ├── A5-yomotsu-webvr-webgr ├── README.md └── slide │ └── list-of-urls.md ├── B1-jxck-pwapps ├── README.md └── slide │ └── list-of-urls.md ├── B2-1000ch-components ├── README.md └── slide │ └── list-of-urls.md ├── B3-hiloki-css ├── README.md └── slide │ ├── 20170225-insidefrontend-refactoring-css.pdf │ └── list-of-urls.md ├── B4-nikkei-d3 ├── README.md └── slide │ └── list-of-urls.md └── B5-yahoo-uknown ├── README.md ├── anai.jpg └── slide └── list-of-urls.md /backyard/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code Of Conduct 2 | 3 | ## みんなで良いイベントにしましょう 4 | 5 | 誰もが気持ち良く楽しめるイベントであるために、セッションスピーカー、AMA ブースオーナー、スタッフはもちろん参加者各位にも、みなさんご協力ください。 6 | 7 | ## 積極的に参加しよう 8 | 9 | イベントには会場現地はもちろん、ライブ配信や Twitter などのソーシャルメディア、ブログ記事など色々な形で参加できます。学んだこと、思ったことをどんどん発信してください。自分に向いた方法でアクションしてみてください。 10 | 11 | 会場現地なら、いわゆる講演による座学スタイルだけでなく、交流のための時間と場所が用意されています。誰かに質問をしても良いですし、近くで誰かの質疑応答を一緒に聞いてみるだけでも良いでしょう。話して聞いて、多くのコミュニケーションが生まれることを願っています。 12 | 13 | ## 現場に持ち帰るまでが遠足 14 | 15 | イベントに参加したら、学んだこと得たことを何らかの形で、あなたの現場に持ち帰ってください。職場でこんなことを見聞きしてきたと共有してもよいですし、新しい何かを早速導入してみてもよいでしょう。 16 | 17 | セッションスピーカーやAMA ブースオーナーは、参加者の現場で何らかのアクションを起こさせることを意識し、それを受けた参加者はどんなに小さくても良いので何らかのアクションを起こしてもらえると、みなさんにとって実りのあるイベントになるはずです。 18 | 19 | ## 悲しませたり怒らせたりしない 20 | 21 | 思いがけない一言が、誰かを悲しませたり怒らせてしまうことがあるかもしれません。十分にご配慮いただくのと同時に、「まずかったかな」と思ったらすぐに謝れることを忘れないでください。これは会場現地に限らず、ソーシャルメディア上での言動も含まれます。例として、次のような点は特に気をつけてください。 22 | 23 | - 容姿や人種、性別、国籍、宗教などに関する差別的な態度 24 | - 未成年に適切でない、または無用な暴力的または性的な表現 25 | - 個人、団体を問わず事実に基づかない誹謗中傷 26 | - 脅迫、ストーキング、つきまといなどの迷惑行為 27 | 28 | あなたがもし、何らか困っている人を見かけたら近くのスタッフに教えてください。スタッフはみなさんが安心して参加できるように、みなさんのお手伝いをします。不適切な振る舞いを繰り返す場合、警告や強制的な退場、今後のイベント参加に関する制限を行うことがあります。 -------------------------------------------------------------------------------- /backyard/FOR_BOOTH_OWNER.md: -------------------------------------------------------------------------------- 1 | # For AMA Booth Owner 2 | 3 | ## AMA ブースオーナーの方へ 4 | 5 | AMA ( _Ask Me Anything_ ) ブースでは、セッションとセッションの間のインターバルで、交流ブースの運営を行います。名前のとおり、質疑応答をメインに進めていただいても結構ですし、参加者と突発的な議論を楽しんでいただいても構いません。 6 | 7 | 下記にスケジュールと、AMA のイメージなどに関するお願いなどを記載いたしましたので、ご一読ください。 8 | 9 | ## スケジュール 10 | 11 | ### 1ヶ月前 12 | 13 | [topics/TOPIC_NAME/README.md](../topics/TOPIC_NAME/README.md) のフォーマットにある情報の共有。 14 | 15 | ### 前日まで 16 | 17 | [AMA ブース用 Q&A](https://github.com/insidefrontend/issue1-ama) から当日取り上げる質問の選定。 18 | 19 | ### 当日 20 | 21 | 全力でお願いします。質問は直前および当日中まで登録される可能性があるので、機転を利かしつつご対応いただけると助かります。 22 | 23 | ## AMA ブースのイメージ 24 | 25 | 1. （質問者） [AMA ブース用　Q&A](https://github.com/insidefrontend/issue1-ama) に質問をIssueとして追加する 26 | 2. （オーナー）Issue から取り上げる質問を選定 27 | 3. （当日）ブースで Issue について質疑応答したり議論したりする 28 | 4. （当日）Issue に関する当日のやり取りを書記（後述）が記録する 29 | 30 | ※ Label や Project のカラム設定は運営でまとめて行います 31 | 32 | AMAブースにて質問を募集していることは、運営側でも可能な限り宣伝しておりますが、ご自身でもSNSなどで宣伝いただければと思います。 33 | 抽選を行うのが2月10日(金)となりますので、そのタイミングから宣伝いただくのがよいかなと思います。 34 | 35 | 尚、ご自身で[AMA ブース用　Q&A](https://github.com/insidefrontend/issue1-ama)によくある質問、答えたい質問などを起票いただいてもかまいません。 36 | 37 | ### AMA ブースの運営案 38 | 39 | 1. 事前の質問または、現地で発生した質問を元にした Q&A またはアンカンファレンス(上記のイメージです) 40 | 2. 現地で Q&A を発生させるためのミニセッション実施 41 | 3. 現地で Q&A を発生させるための壁打ち相手との対談実施 42 | 43 | 基本的には座学になりすぎないよう、参加者から参加感を得られるような内容であれば、上記の案に沿わなくても構いません。 44 | 45 | ## ブースの時間割 46 | 47 | AMAブースはセミナーセッションのインターバルで運営します。 48 | 49 | | | セミナー | ブース | 50 | | --- | ------ | -------- | 51 | | 30分 | セミナー#1 | | 52 | | 25分 | | **ブース#1** 一部 | 53 | | 30分 | セミナー#2 | | 54 | | 25分 | | **ブース#1** 二部 | 55 | 56 | 基本的な導線としては、セミナーを見てAMAへ足を運んでいただき、セミナーを見に戻る、という流れで考えています。 57 | 58 | 25分よりも時間がかかる内容でも、25分で一旦区切って頂いて、セミナーへの参加者希望者をセミナーへ誘導できるよう、お願い致します。 59 | 60 | ### 一部/二部の内容について 61 | 62 | 一部と二部の内容について、一部と二部が**継続する**内容でも、一部と二部で**同じ**内容でも問題ありません。 63 | 64 | 参加者にお知らせをさせていただく関係で、どちらか予定が決まっていましたら、Slackにてその旨お伝えくださいませ。 65 | 66 | ご自身でも、一部の終了後、**継続する**内容なのか、**同じ**内容となるのかお知らせ頂ければ幸いです。 67 | 68 | ## 書記/タイムキーパーのサポートについて 69 | 70 | すべての部屋に進行補助役と書記役のスタッフを配置する予定です。スタッフと事前に打ち合わせたいことなどがあれば、Slack チャンネル等でご連絡ください。また、担当スタッフから事前に質問をさせていただくこともありますので、よろしくお願いいたします。 71 | 72 | ## お願いしたいこと 73 | 74 | ### AMA ブースの宣伝 75 | 76 | 参加者は自由に好きなAMAブースに参加してもらうスタイルであり、人口密度に偏りが出てしまう可能性はありますので、事前にご自身のブースについて SNS などで宣伝いただけると助かります。 77 | また上記と重複いたしますが、参加者からの質問の投稿についても宣伝いただければ。 78 | 79 | ### 必要があれば相方、壁打ち相手の確保 80 | 81 | おひとりでブースを運営されても構いませんが、一緒にテーマについて話す人、議論する人が必要であれば個別に確保ください。 82 | 83 | ## 会場について 84 | 85 | - 約50人規模の小部屋で行われる予定です 86 | - オーナー席にはイスと机、参加者にはイスのみの形を予定しています 87 | - スライドを照射する設備、マイクなども利用できます -------------------------------------------------------------------------------- /backyard/FOR_SESSION_SPEAKER.md: -------------------------------------------------------------------------------- 1 | # For Session Speaker 2 | 3 | ## セッションスピーカーの方へ 4 | 5 | 1人あたり30 分の持ち時間で、ご自身の深い知見や専門分野について存分にご紹介ください。一般的な技術カンファレンスでのプレゼンのイメージ通りで大丈夫です。 6 | 7 | 下記にスケジュールと、テーマ選定などに関するお願いなどを記載いたしましたので、ご一読ください。 8 | 9 | ## スケジュール 10 | 11 | ### 1ヶ月前 12 | 13 | [topics/TOPIC_NAME/README.md](../topics/TOPIC_NAME/README.md) のフォーマットにある情報の共有。 14 | 15 | ### 前日まで 16 | 17 | スライドデータ（Power Point、Keynote の場合は PDF、Google Slide などは URL）の共有。 18 | 19 | ### 当日 20 | 21 | 全力でお願いします。 22 | 23 | ## テーマについて 24 | 25 | ### 好ましいテーマ : 泥臭いケーススタディ、これからの Web に関する議論 26 | 27 | Inside では、実際に遭遇した問題をどのように解決したかという事例や、ライブラリを実際に運用してみた結果の感想、泥臭い成功談、失敗談などケーススタディに関するテーマを歓迎します。 28 | 29 | Web 標準やこれからの Web 技術に関する話も、ケーススタディと同様に歓迎します。今目の前にある問題と、これからの Web における未来の問題、両方を交えながら考えていけるテーマだと望ましいです。 30 | 31 | ### 悩ましいテーマ : ＊＊＊とは的な紹介 32 | 33 | 「（新鋭プロダクト）とは」や「（既存プロダクト）最新情報」のような特定のプロダクトやフレームワークに依存したテーマを選ぶ場合、対象物の根底にあるパラダイムシフトや、解決したい本質的な問題の議論がメインになるような視点でテーマの変更をご検討ください。 34 | 35 | 例えば「React とは」のような既出テーマは、会場の大半がついて行けないくらい変態的な内容でない限り NG とさせてください。極度に変態的な内容であれば問題ありません。 36 | 37 | ## 資料レギュレーション 38 | 39 | 基本的なレギュレーションです。下記以外にも、文字の大小や配色のコントラストなど、必要に応じて個別に修正対応をお願いする可能性があるのでご了承ください。 40 | 41 | ### ツールの自由 42 | 43 | HTML、Google スライド、Keynote、Power Point などお好みの言語、ツールで作成してください。 44 | 45 | ### 比率は 4:3 または 16:9 46 | 47 | 4:3 または 16:9 の一般的な比率で作成してください。 48 | 49 | ### トラブルによるリスク管理 50 | 51 | トラブル時には代替機でも実行できるように Keynote、Power Point であれば PDF をリポジトリに事前共有しておいてください。同様の理由で、HTML スライドの場合は特殊なフォントの使用を避けてください。 52 | 53 | ### デモは録画推奨 54 | 55 | ライブコーディングなどは当日の段取りやテンポが悪くなりやすいので、録画で代替できる場合はそのようにしてください。 56 | 57 | ### テクニックの参考 58 | 59 | 登壇時のスライド作成やマイクの取り回しなど、プレゼンテーションテクニックに関しては[出演される方へ - CSS Nite](http://cssnite.jp/archives/4speakers.html) が参考になります。 60 | -------------------------------------------------------------------------------- /backyard/README.md: -------------------------------------------------------------------------------- 1 | # Inside Frontend #1 2 | 3 | ## Inside 趣旨 4 | 5 | - **個人**のリアルなノウハウの共有、情報交換 6 | - **コミュニティ**の活性化 7 | - **企業**のブランディングやリクルーティング 8 | 9 | 個人やコミュニティの間に生まれる、より密度の高いコミュニケーションを促進し、国内の業界水準を高める一助になることを目的とします。そのために Inside では、個別具体性の高いケーススタディや、これからの Web に関する深い議論の呼び水になるような問題提起を中心的なテーマとします。 10 | 11 | 企業は自らのブランディングや人材のリクルーティングなどを目的としつつ、Web 系コミュニティとの関わり方を互いに創造できるカンファレンスを目指します。営利、非営利を問わず、関係者の合意の元であらゆるコミュニケーションの可能性を模索します。 12 | 13 | ## Inside コンテンツ 14 | 15 | Inside では、セッションと AMA ブースの 2 つをコンテンツとして企画しています。 16 | 17 | ### セッション 18 | 19 | 各社のケーススタディの紹介やある分野のスペシャリストによる講義を行う、一般的なプレゼンテーションです。30 分のセッションを 2 トラック並行で 5 コマ、計 10 セッションを行う予定です。 20 | 21 | ### AMA ブース ( Ask Me Anything ) 22 | 23 | 特定のテーマについてブースのオーナーと自由に話をできるスペースを用意します。セッションとセッションの間のインターバルを長めにとり、その間に AMA ブースでの質疑応答や議論を通して、参加者同士の交流を図ります。 24 | 25 | ## Inside 開催概要 26 | 27 | ### 開催日 28 | 29 | - 2/25 ~~2/18 または 3/4~~ で日程調整中（※変更がありました） 30 | ### 募集開始日 31 | 32 | - 開催日の一ヶ月前(?) 33 | - 募集開始用の connpass は早めにオープンしよう 34 | 35 | ### イベント募集ページURL 36 | 37 | - 無料だし connpass で良さそう 38 | - 先着枠？抽選枠併用？ 39 | - 募集人数はハコの大きさ * 1.2〜1.3 くらい？ 40 | 41 | ### 会場 42 | 43 | - ヤフー株式会社 本社セミナールーム 44 | 45 | ### ハッシュタグ 46 | 47 | | 区分 | ハッシュタグ | 48 | | ----------------- | ------------ | 49 | | 全体 | #insideFE | 50 | | カンファレンスルーム (ルームA) | #insideFE #a | 51 | | セミナールーム (ルームB) | #insideFE #b | 52 | | AMA ブース | hmmm.... | 53 | 54 | ## ロール別 55 | 56 | ### セッションスピーカーの方へ 57 | 58 | [FOR_SESSION_SPEAKER.md](./FOR_SESSION_SPEAKER.md) を参照のこと。 59 | 60 | ### AMA ブースオーナーの方へ 61 | 62 | [FOR_BOOTH_OWNER.md](./FOR_BOOTH_OWNER.md) を参照のこと。 63 | 64 | ### スタッフ、サポート人員の方へ 65 | 66 | [FOR_STAFF.md](./FOR_STAFF.md) を参照のこと。 67 | 68 | ## 共催各社 69 | 70 | 本企画は、独自に Web フロントエンド系の勉強会を開催している各社の有志でお届けしております。 71 | 72 | - [ヤフー株式会社](http://docs.yahoo.co.jp/) / [SCRIPTY - connpass](https://scripty.connpass.com/) 73 | - [日本経済新聞社](http://www.nikkei.co.jp/nikkeiinfo/) / [Frontend Meetup Tokyo - connpass](https://frontend.connpass.com/) 74 | - [株式会社サイバーエージェント](https://www.cyberagent.co.jp/) / [Frontrend powered by CyberAgent, Inc. - connpass](https://frontrend.connpass.com/) 75 | -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura.ai -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura02.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura03.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura04.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura05.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura06.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura07.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura08.png -------------------------------------------------------------------------------- /goods/parker/ラフ確認用/parka_zip_ura1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/ラフ確認用/parka_zip_ura1.png -------------------------------------------------------------------------------- /goods/parker/元データ/parka_zip_ura_white.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/元データ/parka_zip_ura_white.ai -------------------------------------------------------------------------------- /goods/parker/入稿用/parka_zip_verCS 2/Attention.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/入稿用/parka_zip_verCS 2/Attention.pdf -------------------------------------------------------------------------------- /goods/parker/入稿用/parka_zip_verCS 2/parka_zip_omote.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/入稿用/parka_zip_verCS 2/parka_zip_omote.ai -------------------------------------------------------------------------------- /goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura.ai -------------------------------------------------------------------------------- /goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura_darkGreen.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura_darkGreen.ai -------------------------------------------------------------------------------- /goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura_white.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura_white.ai -------------------------------------------------------------------------------- /goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura_ラフ.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/parker/入稿用/parka_zip_verCS 2/parka_zip_ura_ラフ.ai -------------------------------------------------------------------------------- /goods/poster/元データ/IFposter_AMA.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/poster/元データ/IFposter_AMA.ai -------------------------------------------------------------------------------- /goods/poster/元データ/IFposter_SEMINAR.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/poster/元データ/IFposter_SEMINAR.ai -------------------------------------------------------------------------------- /goods/poster/入稿用データ/0221_IFTimetable_AMA.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/poster/入稿用データ/0221_IFTimetable_AMA.ai -------------------------------------------------------------------------------- /goods/poster/入稿用データ/0221_IFTimetable_AMA.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/poster/入稿用データ/0221_IFTimetable_AMA.pdf -------------------------------------------------------------------------------- /goods/poster/入稿用データ/0221_IFTimetable_SEMINAR.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/poster/入稿用データ/0221_IFTimetable_SEMINAR.ai -------------------------------------------------------------------------------- /goods/poster/入稿用データ/0221_IFTimetable_SEMINAR.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/goods/poster/入稿用データ/0221_IFTimetable_SEMINAR.pdf -------------------------------------------------------------------------------- /issue-structure.md: -------------------------------------------------------------------------------- 1 | # イベント毎に作成するディレクトリ、ファイル構造について 2 | 3 | Inside Frontendではイベント毎に`issue #`レポジトリを作成し、イベントの管理を行う。 4 | 本ドキュメントでは`issue #`のディレクトリ、ファイル構造の仕様について説明する。 5 | 6 | ## Issue 7 | 8 | - `/backyard`　<= イベント開催裏方系ドキュメント 9 | - REAMDME.md 10 | - 開催日 11 | - 募集開始日 12 | - イベント募集ページURL 13 | - 会場 14 | - 最大収容数 15 | - 費用 16 | - スタッフ/サポート人員について 17 | - `/topics`　<= イベント開催スピーカ、トピック系ドキュメント 18 | - `{$トピック名(英語)}` 19 | - `/slide` 20 | - PDF 21 | - スライド内のURLリスト.md 22 | - README.md 23 | - スピーカ名 24 | - SNSs 25 | - 所属 26 | - タイトル 27 | - 概要(100文字程度) 28 | - アウトライン -------------------------------------------------------------------------------- /topics/ama-booth/C1-yahoo-a11y/README.md: -------------------------------------------------------------------------------- 1 | # ブースオーナー名前 2 | 福本 翔 / 中野 信 3 | 4 | ## プロフィール画像 5 | - 福本 6 | - aaa 7 | - 中野 8 | - [写真](https://drive.google.com/open?id=0BzGBjcU__74zSWJad0lMMEphdEU) 9 | 10 | ## SNSs、ブログ等 11 | - 福本 12 | - Twitter: [@fukumotoy](https://twitter.com/fukumotoy) 13 | - 中野 14 | - Twitter: [@makojo](https://twitter.com/makojo) 15 | 16 | ## 所属 17 | ヤフー株式会社 18 | 19 | ## テーマタイトル 20 | アクセシビリティ 21 | 22 | ## テーマ概要(100文字程度) 23 | 昨年、障害者差別解消法が施行され、2020年には東京オリンピックが開催されるということもあって、多様な人々がウェブサイトやサービスを使う機会とその必要性は高まりつつあります。 24 | そのような状況の中、アクセシビリティ何それおいしいの? という入り口の話から組織で多様なステイクホルダーを巻き込んでどうアクセシビリティを高めていくかという大きな話まで、なんでもざっくばらんにお答えします。 25 | -------------------------------------------------------------------------------- /topics/ama-booth/C1-yahoo-a11y/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/ama-booth/C1-yahoo-a11y/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/ama-booth/C2-herablog-perfmatter/README.md: -------------------------------------------------------------------------------- 1 | # ブースオーナー名前 2 | 3 | - 原　一成　（はら　かずなり） 4 | - 侯 斌　（こう　ひん） 5 | 6 | ## プロフィール画像 7 | 8 | - 原 9 | 10 | ![herablogプロフィール画像 FF7のシドのイラストから引用](https://pbs.twimg.com/profile_images/2300848944/ato0j2c85jxqfb5mxt8m_400x400.jpeg) 11 | 12 | - 侯 13 | 14 | ![侯プロフィール画像](https://avatars1.githubusercontent.com/u/5006663?v=3&s=400) 15 | 16 | ## SNSs、ブログ等 17 | 18 | - 原 19 | 20 | - [Twitter](https://twitter.com/herablog) 21 | - [Ownd](https://herablog.amebaownd.com/) 22 | 23 | - 侯 24 | 25 | - [Twitter](https://twitter.com/houbin217jz) 26 | 27 | ## 所属 28 | 29 | [株式会社サイバーエージェント](https://www.cyberagent.co.jp/) 30 | 31 | ## テーマタイトル 32 | 33 | アメブロ2016: Isomorphic JavaScriptのパフォーマンス・チューニング 34 | 35 | ## テーマ概要(100文字程度) 36 | 37 | 昨年、アメブロはReact/Reduxを採用し、Node.jsをサーバーにして、フロントエンドとサーバーサイドで同じコードを共有できるIsomorphicシステムに移行しました。 38 | Isomophic JavaScriptについての話やアメブロのチューニングポイントとチューニング方法などをお答えします。 39 | -------------------------------------------------------------------------------- /topics/ama-booth/C2-herablog-perfmatter/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/ama-booth/C2-herablog-perfmatter/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/ama-booth/D1-jxck-pwapps/README.md: -------------------------------------------------------------------------------- 1 | # ブースオーナー名前 2 | 3 | Jxck 4 | 5 | ## プロフィール画像 6 | 7 | ![Jack](https://jxck.io/assets/img/jxck.png "jxck logo") 8 | 9 | ## SNSs、ブログ等 10 | 11 | https://blog.jxck.io 12 | https://twitter.com/jxck_ 13 | 14 | ## 所属 15 | 16 | GDE 17 | 18 | ## テーマタイトル 19 | 20 | AMA ただし Web に関する話しかしない 21 | 22 | ## テーマ概要(100文字程度) 23 | 24 | 正直よくわかってない 25 | -------------------------------------------------------------------------------- /topics/ama-booth/D1-jxck-pwapps/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/ama-booth/D1-jxck-pwapps/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/ama-booth/D2-hiloki-css/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | - 谷 4 | - 斉藤 5 | 6 | ## プロフィール画像 7 | 8 | ### 谷 9 | 10 | ### 斉藤 11 | 12 | - http://d.pr/i/W7gz 13 | 14 | ## SNSs、ブログ等 15 | 16 | ### 谷 17 | 18 | - https://twitter.com/hiloki 19 | 20 | ### 斉藤 21 | 22 | - https://twitter.com/cssradar 23 | 24 | ## 所属 25 | 26 | ### 谷 27 | 28 | ### 斉藤 29 | 30 | 日本経済新聞社 31 | 32 | ## テーマタイトル 33 | 34 | CSS Evolution 35 | 36 | ## テーマ概要(100文字程度) 37 | 38 | Believe in Better CSS... 39 | 40 | ## サンプル・トピック 41 | 42 | - リファクタリング 43 | - CSSアーキテクチャ 44 | - デザイン・システム 45 | - パフォーマンス(アニメーション) -------------------------------------------------------------------------------- /topics/ama-booth/D2-hiloki-css/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/ama-booth/D2-hiloki-css/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/ama-booth/E1-yhassy-ux/README.md: -------------------------------------------------------------------------------- 1 | # ブースオーナー名前 2 | 3 | 長谷川恭久（はせがわやすひさ） 4 | 5 | ## プロフィール画像 6 | 7 | [写真](https://dl.dropboxusercontent.com/u/442794/photo2.jpg) 8 | 9 | ## プロフィール 10 | 11 | Web/アプリに特化したデザイナー・コンサルタントとして活動中。組織に入って一緒にデザインに関わる課題を解決するといった仕事をするなど、チームでデザインに取り組むためにできることを模索している。 12 | 自身のブログとポッドキャストではWebとデザインをキーワードに情報発信をしているだけでなく、各地でWebに関するさまざまなトピックで講演を行ったり、多数の雑誌で執筆に携わる。 13 | 著書に『Experience Points』など。 14 | 15 | ## SNSs、ブログ等 16 | 17 | - Blog: [could](http://www.yasuhisa.com/could/) 18 | - Twitter: [@yhassy](https://twitter.com/yhassy) 19 | - Facebook [yhassy](https://www.facebook.com/yhassy) 20 | - Instagram: [yhassy](https://www.instagram.com/yhassy/) 21 | 22 | ## 所属 23 | 24 | フリーランス 25 | 26 | ## テーマタイトル 27 | 28 | フロントエンドの課題を啓蒙する方法 29 | 30 | ## テーマ概要(100文字程度) 31 | 32 | ここ数年 Web フロントエンドの技術は飛躍的に改善し、ネイティブアプリとは異なる魅力と可能性を示し始めています。新しい技術を取り入れたり、ワークフローの改善に没頭するプロフェッショナルは少なくないですが、技術者視点で周りに伝わり難い場合があります。デザインでよく言われる『ユーザー視点』とは、サイトやアプリを使う人々のことを指すだけでなく、一緒の働く人たちも含まれます。 33 | 34 | 私たちは「伝わらない」と思うと同時に、相手も「分かりにくい」と考えているはずです。このギャップを埋めるためにできることを幾つか紹介します 35 | -------------------------------------------------------------------------------- /topics/ama-booth/E1-yhassy-ux/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/ama-booth/E1-yhassy-ux/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/ama-booth/E2-yahoo-react/README.md: -------------------------------------------------------------------------------- 1 | # ブースオーナー名前 2 | 3 | 穴井宏幸 4 | 5 | ## ブースメンバー 6 | 7 | - 三宮肇 / 石井直矢 8 | - Y!フロントエンドエンジニア 9 | 10 | ## プロフィール画像 11 | 12 | ![](../../session/B5-yahoo-unknown/anai.jpg) 13 | 14 | ## SNSs、ブログ等 15 | 16 | - 穴井 17 | - twitter: https://twitter.com/pirosikick 18 | - qiita: http://qiita.com/pirosikick 19 | - github: https://github.com/pirosikick 20 | - 三宮 21 | - twitter: https://twitter.com/grfxdsgn 22 | - 石井 23 | - twitter: https://twitter.com/kaidempa 24 | 25 | ## 所属 26 | 27 | ヤフー株式会社 28 | 29 | ## テーマタイトル 30 | 31 | React.js 32 | 33 | ## テーマ概要(100文字程度) 34 | 35 | React.jsを導入して良かったこと・悪かったことなど具体的な話や、結局どのライブラリ・フレームワークがいいのか？片手間な場合はどういう風にモダーンな開発環境を導入していけばよいか？などFE全体に関するざっくりとした質問など、なんでもお答えします。 36 | -------------------------------------------------------------------------------- /topics/ama-booth/E2-yahoo-react/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/ama-booth/E2-yahoo-react/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/A1-yahoo-a11y/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | 福本 翔 4 | 5 | ## プロフィール画像 6 | 7 | [写真](https://drive.google.com/open?id=0B-ErPlr1-NRvU0hyUjk0M2NaTXM) 8 | 9 | ## SNSs、ブログ等 10 | 11 | - [Twitter](https://twitter.com/fukumotoy) 12 | 13 | ## 所属 14 | 15 | [ヤフー株式会社](http://www.yahoo.co.jp/) 16 | 17 | ## セッションタイトル 18 | 19 | 多様化する利用環境とどう向き合うか 20 | 21 | ## セッション概要(100文字程度) 22 | 23 | スマートフォンやタブレットの登場から、Webを利用する環境はこれからもどんどん増え続けることが予想されます。本セッションでは、多様化する利用環境に耐えるためのWebページを作成するアプローチについてご紹介します。 24 | 25 | ## アウトライン 26 | 27 | - 多様化するWebの利用環境にどうアプローチしていくか 28 | - Yahoo! JAPANの取り組みの紹介 29 | - 具体的なUIの実装例の紹介 30 | -------------------------------------------------------------------------------- /topics/session/A1-yahoo-a11y/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/A1-yahoo-a11y/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/A2-nikkei-polyfill/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | Andrew Betts 4 | 5 | ## プロフィール画像 6 | 7 | https://trib.tv/wp-content/uploads/2014/10/1-square.jpg 8 | 9 | ## SNSs、ブログ等 10 | 11 | - Website: https://trib.tv/ 12 | - Twitter: https://twitter.com/triblondon 13 | 14 | ## 所属 15 | 16 | Financial Times 17 | 18 | ## セッションタイトル 19 | 20 | Polyfills are part of the web 21 | 22 | ## セッション概要(100文字程度) 23 | 24 | 変化が常でかつ早いWebでモダンなサイトを構築するということは、古いブラウザをサポートするためには、Babelのようなトランスパイラやポリフィル、時にはその両方を利用する必要があります。 25 | このセッションでは、ポリフィルの利用に関する新しいW3C TAGによるガイダンスの草案を紹介しながら、下位互換性を考慮する際に知っておくべきベストプラクティスとヒントを紹介します。 26 | 27 | ## アウトライン -------------------------------------------------------------------------------- /topics/session/A2-nikkei-polyfill/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/A2-nikkei-polyfill/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/A3-herablog-ameblo/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 原 一成 (@herablog) 3 | 4 | ## プロフィール画像 5 | ![herablogプロフィール画像 FF7のシドのイラストから引用](https://pbs.twimg.com/profile_images/2300848944/ato0j2c85jxqfb5mxt8m_400x400.jpeg) 6 | 7 | ## SNSs、ブログ等 8 | 9 | - [Twitter](https://twitter.com/herablog) 10 | - [Ownd](https://herablog.amebaownd.com/) 11 | 12 | ## 所属 13 | 14 | [株式会社サイバーエージェント](https://www.cyberagent.co.jp/) 15 | 16 | ## セッションタイトル 17 | 18 | アメブロ2016: 実録、アメブロフロントリニューアル275日 19 | 20 | ## セッション概要(100文字程度) 21 | 22 | アメブロは2016年9月にシステムリニューアルをしました。使用した技術は[ブログ記事](https://developers.cyberagent.co.jp/blog/archives/636/)に記載していますので本セッションでは、その進め方やパフォーマンスチューニングをどのようにしていったかについてお伝えします。 23 | 24 | ## アウトライン 25 | - アメブロ2016？ 26 | - アメブロのモバイル面をリニューアルしたプロジェクト 27 | - Isomorphicで速度改善をして成果があった 28 | - 成果 29 | - 採用技術はこんな感じ 30 | - 詳しくはブログや記事を 31 | - 今日は主に速度改善をしたフローをご紹介 32 | - 275日は単純に日にちを足しただけ 33 | - コンセプト (当時のメモから振り返る) 34 | - できるだけ普通(その時点で一番有名)のツールを使う 35 | - 情報が多い 36 | - 色んなひとが触れる 37 | - フロントエンドサーバー化 38 | - node 39 | - 表示に関わるところは誰でもさっと変えられるようにする 40 | - できるだけHTMLで返し、js, cssの容量減らす 41 | - 将来のhttps, HTTP/2に向けた設計 42 | - 設計を変えつつ運営していくことを当たり前にする 43 | - JS 44 | - React 45 | - Flux 46 | - ES6, 7 47 | - ESLint 48 | - 型はどうしようかなあ 49 | - CSS 50 | - PostCSS 51 | - BEM 52 | - stylelint 53 | - Style Guide (結果的にはこのメンテが大変そうなのでWeb管理になった) 54 | - HTML 55 | - モダンなMETA 56 | - アクセシビリティ 57 | - AMP仕様決まってたらやってみるか 58 | - Build 59 | - gulp 60 | - package.json中心 61 | - Store 62 | - DBは持たないが、軽いキャッシュ欲しい 63 | - CI 64 | - 検討する 65 | - モニタリング 66 | - kibana？ 67 | - パフォーマンスを簡単にモニタリングできるようにする 68 | - Docker? オンプレで上手くいくの？ 69 | - まず調査 SpeedCurve (当時のissueから) 70 | - Blocking Resorces 多い 71 | - JSの非同期化 72 | - HTML容量多い 73 | - statキャッシュの最適化 74 | - Webfontの統合 75 | - いらない読み込みの削除 76 | - 画像のCSS化 77 | - 基本設計ぎめ 78 | - SSR, LazyLoad 79 | - SPAはあとから追加した 80 | - モダンなワークフロー 81 | - Git, Lint, CI, deployment 82 | - コケるテスト 83 | - ひたすら実装 84 | - まずは、しっかりと作り込む 85 | - 作っては壊すを繰り返す 86 | - リリース前からリリース練習をする 87 | - いい感じになってきた 88 | - 負荷試験 89 | - 過去のアクセスログを元に検証 90 | - NewRelic 91 | - 事件!! (最初の結果はよくなかった) 92 | - レスポンスの遅さ, CPU利用率の高さ 93 | - アメブロのアクセスの多さ 94 | - コンポーネントの増加 95 | - ひたすらチューニング 96 | - Docker, Linux設定 97 | - Rancher, HAProxy設定 98 | - 1host1LB化 99 | - Optimization killers 100 | - メモリリーク 101 | - setTimeout 102 | - react defaultProps 103 | - try catch 104 | - renderToString 105 | - キャッシュ 106 | - on-memory and cache servers 107 | - Redis vs Memcached 108 | - APIデータと生成したHTML自体をキャッシュ 109 | - データ更新には内部APIを用意 110 | - 2ヶ月延びてプレッシャーをかけられる 111 | - なんとかリリース 112 | - 結果としてPremature optimization is the root of all evil 113 | - チューニング自体が目的にならないことはよかった 114 | - お疲れ様でした 115 | -------------------------------------------------------------------------------- /topics/session/A3-herablog-ameblo/slide/list-of-urls.md: -------------------------------------------------------------------------------- 1 | - [アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~](https://developers.cyberagent.co.jp/blog/archives/636/) 2 | - [アメブロ2016 ~ Isomorphic JavaScriptの詳しい話](https://developers.cyberagent.co.jp/blog/archives/3513/) 3 | - [アメブロの大規模システム刷新と それを支えるSpring](https://www.slideshare.net/nin2hanzo/spring-69237035) 4 | - [アメブロ2016：インフラ編　〜大規模リニューアルの裏側〜](https://developers.cyberagent.co.jp/blog/archives/2653/) 5 | - [SpeedCurve](https://speedcurve.com) 6 | - [Optimization killers](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers) 7 | - [Premature Optimization](http://wiki.c2.com/?PrematureOptimization) 8 | -------------------------------------------------------------------------------- /topics/session/A4-kyo_ago-test/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | 吾郷 協 (@kyo_ago) 4 | 5 | ## プロフィール画像 6 | 7 | ![](https://pbs.twimg.com/profile_images/583085416376467456/pvJ8BcvS.png) 8 | 9 | ## SNSs、ブログ等 10 | 11 | [Twitter](https://twitter.com/kyo_ago) 12 | [GitHub](https://github.com/kyo-ago) 13 | [Blog](http://0-9.tumblr.com/) 14 | 15 | ## 所属 16 | 17 | [ChatWork株式会社](http://www.chatwork.com/ja/) 18 | 19 | ## セッションタイトル 20 | 21 | karmaを使ったSPA向けのE2Eテスト技法 22 | 23 | ## セッション概要(100文字程度) 24 | 25 | E2Eテストを行う場合によく使われるWebDriverはブラウザのサポートは厚いものの、必ずしも開発しやすい環境ではありませんでした。ここでは通常のJavaScript開発に近いkarmaを使ったE2Eテストの方法について紹介します。 26 | 27 | ## アウトライン 28 | 29 | 最近使われてるE2Eテストフレームワークの紹介。 30 | WebDriverでテストを書くときの雰囲気紹介。 31 | WebDriverでテストを書くときの問題点。 32 | 解決案としてのKarmaを使ったE2Eテスト手法の紹介。 33 | 適応可能な範囲の説明。 34 | 既存のコードに対して適応する場合の手順紹介。 35 | -------------------------------------------------------------------------------- /topics/session/A4-kyo_ago-test/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/A4-kyo_ago-test/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/A5-yomotsu-webvr-webgr/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | 小山田 晃浩 (@yomotsu) 4 | 5 | ## プロフィール画像 6 | 7 | ![](https://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=256) 8 | 9 | ## SNSs、ブログ等 10 | 11 | - [Twitter](https://twitter.com/yomotsu) 12 | - [GitHub](https://github.com/yomotsu) 13 | - [Blog](http://yomotsu.net/blog/) 14 | 15 | ## 所属 16 | 17 | [株式会社ピクセルグリッド](https://www.pxgrid.com/) 18 | 19 | ## セッションタイトル 20 | 21 | WebGL/WebVR for FrontEnd Engineer 22 | 23 | ## セッション概要(100文字程度) 24 | 25 | モバイルを含めて多くのブラウザーでWebGLが利用できるようになり、これによりWebVRや疑似VRを含む3D Webコンテンツをしばしば見かけるようになってきました。このセッションでは、Webの3Dの基本をおさらいから、「Web」向けに3Dコンテンツを作る上で、開発者が気を配るといいであろうポイントまでをご紹介します。 26 | 27 | ## アウトライン 28 | 29 | こういうの作ってます 30 | -> 3Dフィギュアビューアとか 31 | 32 | ## ネイティブアプリのような表現【イントロダクション】 33 | 34 | いまのWebではHTML/CSSでできなかったアプリみたいなことができる 35 | ↓ 36 | WebGLで動いているよ 37 | ↓ 38 | WebGLというと難しい？ 39 | OpenGLから派生した、Webの人には馴染みのない技術？ 40 | ↓ 41 | でもいまはさまざまなJSライブラリがある 42 | 43 | - three 44 | - babylon 45 | - play canvas 46 | - blend web 47 | 48 | APIがあるから、その上にライブラリが作られて 49 | 低レベルAPIをWebらしく、馴染み深い形式にしている 50 | 51 | 音にしても画像にしても、ローレベルAPIがあることが重要だよね 52 | 53 | ↓ 54 | 必要なのは、JSの知識 + 基本的な数学、3D用語（どれもすぐ慣れるよ） 55 | ↓ 56 | threeは抽象化されているのでいい、ドキュメントもおおい。コミュニティも大きい 57 | 58 | わからなかったらStackoberflowがある 59 | 60 | 簡単な例 61 | 62 | でもこういうのはもう空きましたよね。 63 | もう少し実践的なお話が本題です 64 | 65 | ## Webにおける3Dアプリでの問題点と解決例【メインで伝えたいこと】 66 | 67 | - ローポリ化しよう(Webはローカルファイルではない、JSONをエディタで開くとこんな感じだよ) 68 | - CPUとGPUは物理的に離れていることを意識しよう 69 | - JSで毎回メッシュを更新してアップロード vs Shaderで頂点を操作demo 70 | -ドローコールを意識しよう 71 | - ドローコールを見てみよう 72 | - 端末種は不特定多数、ドローコール数の違いdemoを見てみよう 73 | - ドローコールをまとめるには？ 74 | - zip圧縮してみよう 75 | - リスエストが一つになって回線に優しい 76 | - ロード進行度の管理も楽 77 | - モデルデータはzipですごく圧縮できる 10MB → 3MB） 78 | - その他圧縮: http://compress-or-die.com/obj 79 | 80 | #まとめ 81 | WebGLはWebフロントエンドの技術。 82 | よりよく使うための道具は、あなたのJS経験の中にもあるはず。 83 | なぜなら、JSのAPIだから。JSのこーどだから 84 | 85 | たとえば、Vueを使った例 86 | 87 | 88 | ## WebGLとWebVR 89 | - 本物VR 90 | - 簡易VR 91 | 92 | ## 関連技術もあるよ 93 | - SIMD 94 | - ASM.js 95 | - WebAssembly 96 | -------------------------------------------------------------------------------- /topics/session/A5-yomotsu-webvr-webgr/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/A5-yomotsu-webvr-webgr/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/B1-jxck-pwapps/README.md: -------------------------------------------------------------------------------- 1 | # Jxck 2 | 3 | ## プロフィール画像 4 | 5 | ## SNSs、ブログ等 6 | 7 | https://twitter.com/jxck_ 8 | 9 | ## 所属 10 | 11 | GDE 12 | 13 | ## セッションタイトル 14 | 15 | Web over ServiceWorker 16 | 17 | ## セッション概要(100文字程度) 18 | 19 | オフライン対応を目的に導入された Service Worker は、ブラウザのライフサイクルを拡張する基盤として、独自の進化をとげつつあります。 20 | この Service Worker で今何が起こっているのか、どこに向かっているのかについて考えます。 21 | 22 | 23 | ## アウトライン 24 | 25 | TBD 26 | -------------------------------------------------------------------------------- /topics/session/B1-jxck-pwapps/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/B1-jxck-pwapps/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/B2-1000ch-components/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | 1000ch 4 | 5 | ## プロフィール画像 6 | 7 | ## SNSs、ブログ等 8 | 9 | https://twitter.com/1000ch 10 | https://github.com/1000ch 11 | https://1000ch.net 12 | 13 | ## 所属 14 | 15 | [株式会社サイバーエージェント](https://www.cyberagent.co.jp/) 16 | 17 | ## セッションタイトル 18 | 19 | Web フロントエンドにおけるコンポーネント化のアプローチ 20 | 21 | ## セッション概要(100文字程度) 22 | 23 | Web フロントエンドにおけるコンポーネントとは何なのか、 HTML/CSS の言語特性や Web というプラットフォームの観点から考察します。 24 | 25 | ## アウトライン 26 | 27 | - なぜコンポーネント化するのか 28 | - コンポーネントの定義とは 29 | - ビジュアルと振る舞い 30 | - Web におけるコンポーネント化のアプローチ 31 | - CSS の言語仕様との向き合い方 32 | - デザインシステムと CSS の破綻 33 | - CSS プリプロセッサを使った抽象化とこれからの CSS 34 | - Atomic Design by Brad Frost 35 | - React と CSS Modules 36 | - Web Components v1 37 | -------------------------------------------------------------------------------- /topics/session/B2-1000ch-components/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/B2-1000ch-components/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/B3-hiloki-css/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | - 谷 4 | - 斉藤 5 | 6 | ## プロフィール画像 7 | 8 | ### 谷 9 | 10 | - http://inkdesign.jp/images/author/tani.jpg 11 | 12 | ### 斉藤 13 | 14 | - http://d.pr/i/W7gz 15 | 16 | ## SNSs、ブログ等 17 | 18 | ### 谷 19 | 20 | - https://twitter.com/hiloki 21 | - https://github.com/hiloki 22 | 23 | ### 斉藤 24 | 25 | - https://twitter.com/cssradar 26 | 27 | ## 所属 28 | 29 | ### 谷 30 | 31 | 株式会社ツクルバ 32 | 33 | ### 斉藤 34 | 35 | 日本経済新聞社 36 | 37 | ## セッションタイトル 38 | 39 | Refactoring CSS: 管理されたカオスへの道のり 40 | 41 | ## セッション概要(100文字程度) 42 | 43 | 壊れてしまったCSSはどうやったら直せるのでしょうか?複雑で、変更の多いUIを表現するための言語であるCSSのカオスを管理するためのアプローチについて紹介。 44 | 45 | ## アウトライン 46 | 47 | - レガシー・コードへの挑戦 48 | - Code Smells in CSS 49 | - HTMLとCSSの依存関係 50 | - リファクタリングの進め方 51 | - Specificityを保つための戦略 52 | -------------------------------------------------------------------------------- /topics/session/B3-hiloki-css/slide/20170225-insidefrontend-refactoring-css.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/B3-hiloki-css/slide/20170225-insidefrontend-refactoring-css.pdf -------------------------------------------------------------------------------- /topics/session/B3-hiloki-css/slide/list-of-urls.md: -------------------------------------------------------------------------------- 1 | - [リファクタリング by Martin Fowler](https://www.amazon.co.jp/dp/427405019X/ref=cm_sw_r_cp_ep_dp_g3iMybTKNGZY7) 2 | - [“Refactoring CSS doesn't mean rewriting selectors w/ the n number of dashes and underscores. Focus on what's between the curly braces.” by Mark Otto](https://twitter.com/mdo/status/636375673615966208) 3 | - [Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com/) 4 | - [`display: initial` デモ](https://studiomohawk.jsbin.com/sakatab/edit?html,css,output) 5 | - [shame.css by Harry Roberts](https://csswizardry.com/2013/04/shame-css/) 6 | - [The Long Goodbye by Raymond Chandler](https://www.amazon.co.jp/dp/4150704619/ref=cm_sw_r_cp_ep_dp_m0XPybT9YT6QQ) -------------------------------------------------------------------------------- /topics/session/B4-nikkei-d3/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | 清水正行 4 | 5 | ## プロフィール画像 6 | 7 | http://d.pr/i/xWj8 8 | 9 | ## SNSs、ブログ等 10 | 11 | - blog: http://shimz.me/blog/ 12 | - twitter: https://twitter.com/_shimizu 13 | - facebook: https://www.facebook.com/xxshimizu 14 | - github: https://github.com/shimizu 15 | 16 | ## 所属 17 | 18 | 日本経済新聞社 19 | 20 | ## セッションタイトル 21 | 22 | データビジュアライゼーションの作り方 23 | 24 | ## セッション概要(100文字程度) 25 | 26 | データビジュアライゼーションの作成では、一般的なフロントエンド開発とは又違った課題やワークフローが必要になります。その辺の苦労話やD3.jsの利点などについて話します。 27 | 28 | ## アウトライン 29 | 30 | - 自己紹介、作成したコンテンツの紹介 31 | - 一般的なフロントエンド開発とデータビジュアライゼーション作成の違い 32 | - D3.jsの特徴と利点 33 | - バッドノウハウ -------------------------------------------------------------------------------- /topics/session/B4-nikkei-d3/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/B4-nikkei-d3/slide/list-of-urls.md -------------------------------------------------------------------------------- /topics/session/B5-yahoo-uknown/README.md: -------------------------------------------------------------------------------- 1 | # セッションスピーカー名前 2 | 3 | 穴井宏幸（あないひろゆき） 4 | 5 | ## プロフィール画像 6 | 7 | ![](anai.jpg) 8 | 9 | ## SNSs、ブログ等 10 | 11 | - twitter: https://twitter.com/pirosikick 12 | - qiita: http://qiita.com/pirosikick 13 | - github: https://github.com/pirosikick 14 | 15 | ## 所属 16 | 17 | - ヤフー株式会社 18 | 19 | ## セッションタイトル 20 | 21 | JSON Schema in Web Frontend 22 | 23 | ## セッション概要(100文字程度) 24 | 25 | 開発中の広告入稿ツールにおけるJSON Schemaの活用事例を紹介します。 26 | 27 | ## アウトライン 28 | 29 | まだざっくりです。 30 | 31 | - JSON Schema/JSON Hyper Schemaとは？ 32 | - JSON Hyper SchemaでのFE/BEの意思疎通の話 33 | - JSON Schemaで広告の設定値を管理している話 34 | -------------------------------------------------------------------------------- /topics/session/B5-yahoo-uknown/anai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/B5-yahoo-uknown/anai.jpg -------------------------------------------------------------------------------- /topics/session/B5-yahoo-uknown/slide/list-of-urls.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insidefrontend/issue-1/a0d88d62fa162bb5bd7895265c3d3e63d0f7c73c/topics/session/B5-yahoo-uknown/slide/list-of-urls.md --------------------------------------------------------------------------------