BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:リアルタイムでコードを共創できるオンライ ンエディターCodePenを活用しよう X-WR-CALNAME:リアルタイムでコードを共創できるオンライ ンエディターCodePenを活用しよう X-WR-TIMEZONE:Asia/Tokyo BEGIN:VTIMEZONE TZID:Asia/Tokyo BEGIN:STANDARD DTSTART:19700101T000000 TZOFFSETFROM:+0900 TZOFFSETTO:+0900 TZNAME:JST END:STANDARD END:VTIMEZONE BEGIN:VEVENT UID:937433@techplay.jp SUMMARY:リアルタイムでコードを共創できるオンラインエ ディターCodePenを活用しよう DTSTART;TZID=Asia/Tokyo:20240426T210000 DTEND;TZID=Asia/Tokyo:20240426T220000 DTSTAMP:20260528T210907Z CREATED:20240301T060144Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/93743 3?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\nHTML/CSS/JavaScr iptを書きながら、リアルタイムで結果をプレビューで きるオンラインエディター「CodePen」にフォーカス。相 原 典佳さんに解説いただきます。\n\n「当日の視聴は 無料」スタイルで開催しますが、アーカイブチケット 購入やサブスク登録でサポートくださいますと助かり ます！\n\nアーカイブ購入について本イベントのアーカ イブはサブスクメンバーのみに共有します。まずは無 料のユーザー登録を行い、その後、サブスクに加入な さってください。\n\nCodePen\n\nコーディングのテクニッ ク紹介記事を見ているとよく出てくる「CodePen」、見た ことはあるけれど使ったことがないという方が多いの ではないでしょうか？　\n\n「CodePen」は、HTML/CSS/JavaScri ptを書きながら、リアルタイムで結果をプレビューで きるオンラインエディターです。\n\n本セミナーでは、 紹介記事経由でのCodePenを利用する方法や、ちょっとし たHTML/CSSコーディングを試したいときの利用方法をう ハンズオン形式で解説します。\n\nまた、抑えておきた いオンラインエディタとして、GitHubでも活用できるオ ンライン版「Visual Studio Code」についても紹介します。\ n\n以下の内容を紹介・解説します。\n\n\nCodePenとは\nCode Penの使い方\nCodePen以外のオンラインエディタ\nオンラ イン版Visual Studio Code\n\n\n相原 典佳（あいはら・のりよ し）DTP、Webアシスタントディレクター業務を経たのち 、2010年にフリーランスとして独立。ディレクションか らデザイン、フロントエンド・WordPress構築まで、一貫 したWebサイト制作を提供しているほか、2011年からデジ タルハリウッドにて講師を担当。共著書として『初心 者からちゃんとしたプロになる HTML+CSS実践講座』、『 初心者からちゃんとしたプロになる Figma基礎入門』（ いずれもMdN刊）などがある。\n\n聞き手、MC（進行）\n\n 鷹野 雅弘（CeeBeeDee/CSS Nite/DTP Transit）が“聞き手”を担 当し、リアルタイムでチャットでの質問などを拾って いきます。\n\n鷹野 雅弘（たかの・まさひろ）株式会 社スイッチグラフィックデザイン、エディトリアルデ ザイン、ウェブ制作の分野で、デザイン、オペレーシ ョン、設計・ディレクションなど、25年以上、第一線 で手を動かし続けている。そのノウハウをテクニカル ライティングや講演に落とし込み、「制作→執筆→講 演」のサイクルを回す。2015年から大阪芸術大学 客員 教授。 2017年からAdobe Community Evangelist。CSS NiteやDTP Transi tのオンラインセミナーのオーガナイザーとして企画・ 制作・配信なども担当。Twitter：@swwwitch\n\nイベント概 要\n\nYouTube Liveでライブ配信します。\n\n\n開催日：2024 年4月26日（金） 21:00 - 22:00\n形式：オンライン（YouTube L ive）\nMC：鷹野 雅弘（スイッチ）\n主催：CeeBeeDee\n共催 ：CSS Nite、DTP Transit\n協賛（制作会社）：ウェブライダ ー、LINICA、エンタミナ、トゥーアール（to-R）、ヘルツ 、コンセント、サービシンク、アップルップル、ゴン ウェブイノベーションズ、CODE54、HAMWORKS、S-FACTORY、necco 、エイチツーオー・スペース、FLAT、ONiWA\n協賛：文賢 （ブンケン）、KDDIウェブコミュニケーションズ\n\n\nお 申し込みと参加費\n\n\n当日の視聴は無料です。\n参加 にはお申し込みが必要です。受け付けは終演時刻まで 。\n\n\nフォローアップ（アーカイブ）\n\nスライドなど のフォローアップ（アーカイブ）は、サブスクの方限 定のコンテンツです。\n\n「サブスク」をはじめます\n\ nCSS Nite、DTP Transitのオンラインセミナーのアーカイブ を管理しやすく利用いただけるように、2024年2月の開 催分から次のように変更します。 \n\n\nアーカイブ見放 題の「サブスク」：Circle\n単品での購入：STORES \n\n\n「 サブスク」（定額サービス）の仕組みによってコスパ よく利用いただけます。 ライブ配信は、従来通り「当 日の視聴は無料」スタイルを継続します。「サブスク 」の加入にかかわらず、誰でも見られます。 \n\nなお 、Circle、STORESにおいて、CSS NiteとDTP Transitの両方をカバ ーするブランド名として「CeeBeeDee（シー・ビー・ディ ー）」を使いはじめます。\n\n\n\nサブスクの有無にか かわらず、開催情報などをCircleに集約していきます。\ n\n配信に関してのあれこれ\n\n各URLは、YouTubeの概要欄 にも掲載しています。\n\n\nチャットやスタンプ、ツイ ートなど「参加型」でお楽しみください！\n「音声の バランスが悪い」など、何かお困りの場合、コメント などで教えてください！\n\n\n配信URL\n\nYouTube Liveで配信 します。\n\nhttps://youtube.com/live/QtY_e6FWtG4?feature=share\n\nX （Twitter）にて同時配信も行っていますが、YouTube Liveに てコメントも含めてお楽しみください。\n\nYouTube関連\n \n\nYouTubeチャットを活用ください！　スパム回避のた め、YouTubeチャンネル登録者のみがコメント可能にして いますので、事前にチャンネル登録をお願いします。\ nスーパーチャット（スパチャ＝投げ銭）を利用できま す。少額でも大歓迎です！　いただいた全額を講演者 にお渡しします。\n質問がある場合、YouTubeチャットで 冒頭に★または【質問】を付けてコメントください。 すべては拾いきれません。「〜は〜という意味です」 「自分の現場ではこうやっている」など、視聴される 方からのサポート的なコメントを歓迎します！　一緒 に場を作ってくださいますと嬉しいです!! \n\n\nリアク ションや質問\n\n\nCommentScreenを使って、画面上にスタン プを送信できます。スマホだけでなく、PCからも送信 可能。ただし、CommentScreenのコメント機能は使っていま せん。\nスクショ付きのツイート歓迎です。ぜひ、ハ ッシュタグ（#CodePen）を付けてください。ただし、事 例の部分などでNGマークがついている箇所、講演者か らNGの指示のある箇所はご遠慮ください。\n終了後、ぜ ひアンケートにお答えください！　「フィードバック はギフト」。話してくださった方の成長の材料になり 、また、イベントの改善につながります。\n\n\nその他\ n\n\n「UDトーク」にて文字情報を提供しますので、別の ブラウザーなどでご覧ください。タイムラグや精度に ついてはご容赦ください。\nサンプルファイルや配布 資料、アーカイブ動画のURLをSNSなどで再配布するのは 禁止です。\n開演の30分前くらい前からテスト配信をス タートします。音声などが聞こえるかチェックなさっ てください。\nスマホやタブレットで視聴される方も いると思いますが、PCでの視聴を前提としています。 なるべくPCでご覧ください！\nご覧いただく回線状況に よっては、YouTubeの動画が止まってしまったり、音声が 途切れてしまうことがあります。その場合には、ブラ ウザーを再読み込みしたり、OSを再起動してみてくだ さい。\n\n\n配信準備は念入りに行っていますが、本番 になると予期せぬトラブルが生じるのがライブ配信で す。それも含めて楽しんでください。\n\nオンライン椅 子ヨガ\n\n本イベントはコモモ先生 @komomoaichi のオンラ イン椅子ヨガ付きです！\n\n\n開演前\n休憩時間（適宜 ）\n\n\n一緒に「ちょっとメンテ」しましょう。\nhttps:// chotto-maint.com/online-yoga\n\n\n\n方向性\n\n「オンラインセミ ナー」や「ウェビナー」というより「オンラインイベ ント」的なニュアンスです。\n\n\nいわゆる「セミナー 」ではなく、「オンラインイベント」です。\nあえて 「教えることを生業にしていない方」を（多めに）ブ ッキングしています。“聞き手”を立てることによっ てフォローしながら進めますが、それでも説明が足り なかったり、うまく時間配分をコントロールできない ことがあります。\nまた、「オンラインで画面に向か って一人で喋る」のは場数を多く踏まない限り、苦行 です。そこで聞き手を立て、うなづきや相づちを入れ ています。「うなづきがうるさい、不要」と思う方も いると思いますが、ご容赦ください！（録画の講座で はなく、オンラインイベントなのです）\n「当日の視 聴は無料」ということは謝礼もしかるべき金額ですし 、日々の仕事の中から準備の時間を捻出されています 。少し寛大なムードで受け取ってくださいますと幸い です。\n分単位で細かく練られたカリキュラムではな く、少し緩めに進行します。コメントを拾って脱線す ることもあります。言い換えると学習だけをされたい 方には向いていません。\n若干の延長など、ぴったり 進行しないことがあります。\n\n\n「当日の視聴は無料 」を続けるために応援をお願いします！\n\nDTP Transitの オンラインセミナーは「当日の視聴は無料」で開催し ていますが、収入となる源泉が「アーカイブ視聴のチ ケット」しかありません。\n\n余裕のあるときなどに「 アーカイブ視聴のチケット」を購入いただけると助か りますが、次に挙げるような〈無料でできる応援〉が あります。\n\n\n「こんなイベントがある」と、まわり の方に知らせる\n「こんなイベントに参加したけど… 」と感想をまわりの方に伝える\nハッシュタグを付け てツイートする（スクショやネタバレOKです）\nアンケ ートに回答する\n出演された方のTwitterをフォローする ／YouTubeをチャンネル登録する\n参加されたイベントのY ouTubeプログラムに「GOOD」（高評価）ボタンを押す\nDTP TransitのTwitterをフォローする／YouTubeをチャンネル登録 する\n\n\n特にお願いしたいのは「アンケート回答」で す。 話してくださった方の成長の材料になり、また、 イベントの改善につながります。\n\n企業主催のセミナ ーのように「開催後に営業メールが頻繁に届く」よう なこともなく続けられるために応援くださいますと幸 いです。\n\n\n 「チャンネル登録や高評価は無料ででき る応援です」 by ベーコンさん \n\n\n協力企業のご紹介\n \n本イベントには、下記の企業の協賛、協力をいただ いています。\n\n\nKDDIウェブコミュニケーションズ レ ンタルサーバー「CPI」、簡単ホームページ作成「ジン ドゥー」など提供\n文賢（ブンケン）～文章をより良 くするための推敲・校閲・校正支援ツール\n\n\nまた、 多くの制作会社に協賛いただいています。\n\n\nウェブ ライダー\nLINICA\nエンタミナ\nコンセント\nサービシン ク\nトゥーアール（to-R）\nヘルツ\nアップルップル\nCODE 54\nHAMWORKS\nS-FACTORY\nnecco\nFLAT\nゴンウェブイノベーショ ンズ\nエイチツーオー・スペース\nONiWA\nましじめ\n\n\n 通年で協賛を募集しています。検討くださいますと幸 いです。\n\n \n\nお問い合わせ\n\n問い合わせはDoorkee perのフォームからお送りください。 LOCATION:オンライン URL:https://techplay.jp/event/937433?utm_medium=referral&utm_source=ics&utm _campaign=ics END:VEVENT END:VCALENDAR