WTDC Meeting #01

WTDC Meeting #01
札幌を拠点に活動しているWEBクリエイターの、ちょこっと交流&勉強会！
4/6(sat)15:00‑18:00
株式会社インフィニットループ貸会議室
〒060‑0031 北海道札幌市中央区北2条東4丁目
（札幌ファクトリー1条館）
社会人1000円学生500円

皆様この度はお越しくださいまして
ありがとうございます！
WTDC Meeting #01

3時間と長いようで短い時間ですが、
ドリンクを飲みながらゆったりとお楽しみ下さい。
WTDC Meeting #01

WTDC Meeting #01
Web Three‒D Community（WTDC）について

WTDC Meeting #01
WTDCは、コミュニケーションツール「Slack」の
ワークスペースを主な拠点とし、Webに関する情報共有、質問・相談
が出来るオンラインコミュニティーです。

WTDC Meeting #01
①Webサイトの構築をしているけど勉強方法がわからない
②デザイン業務をしているけどもっとスキルアップしたい
③クリエイティブ系のおすすめの書籍とか知りたい
④学生だけど、札幌のWeb業界のリアルを知りたい
⑤クリエイティブな人達とつながりを持ちたい
etc…

WTDC Meeting #01
それらの悩みや相談をこのコミュニティーで
議論できればと思っています。

WTDC Meeting #01
「Three‒D」の由来は、
「ディレクター（Director）」
「デザイナー（Desinger）」
「デベロッパー（Developper）
頭文字“D”から名付けました。

WTDC Meeting #01
とはいえ、これらに当てはまらない方々の参加も大歓迎！
会社でWebに携わっている方も、フリーランスの方も、
学生の方も、お気軽にご参加ください！

WTDC Meeting #01
Slackを触ったこと無い方はこちらから

WTDC Meeting #01
コミュニティの参加はこちらのURLからお願いいたします！

WTDC Meeting #01
Slackでは下記のようなチャンネルを
用意していますのでお気軽にご相談下さい！
1.オススメ書籍
2.セミナー開催のお知らせ
3.コードレビュー
4.デザインレビュー
5.はじめての方へ
6.質問と相談
7.気になったデザイン
8.気になった記事共有
9.業務効率化
10.雑談
11.自己紹介
12.制作物発表

WTDC Meeting #01
セミナー中の質問や投稿は、
＃WTDC
のハッシュタグで投稿して頂けると嬉しいです！

WTDC Meeting #01
説明ばかりでしたが、
Webが好きな人と交流したい！
という純粋な気持ちで運営しております。
何卒よろしくお願いいたします！

エンジニアが語る仕事を楽しくする
ライフハック術
#WTDCWTDC Meeting #01
SHUNYA ISHIZUKA
2019.04.06

#WTDC
エンジニアが語る仕事を楽しくするライフハック術
ライフハックとは
仕事を効率良くこなし、高い生産性を上げ、
人生のクオリティを高めるための工夫。
http://d.hatena.ne.jp/keyword/%A5%E9%A5%A4%A5%D5%A5%CF%A5%C3%A5%AF

#WTDC
自己紹介
◆会社:株式会社Gear8
◆役職:フロントエンドエンジニア
◆好きなこと:
ガジェットの情報集め、料理、新商品の飲料
を飲むこと、おしゃべり

#WTDC
自己紹介:株式会社Gear8

#WTDC
自己紹介:株式会社Gear8 概要
設立 2009年10月1日
スタッフ日本スタッフ12名（他拠点含め19名）
事業内容
・Webサイトのデザイン・コーディング及び構築
・インターネットを利用したマーケティング戦略の立案、及びコンサルティング
・インターネットによる広告業、及び販売促進に関する企画の代理業
・グラフィックデザイン

#WTDC
自己紹介:株式会社Gear8 特徴①多拠点

#WTDC
自己紹介:株式会社Gear8 特徴②動物

#WTDC
自己紹介:株式会社Gear8 特徴②動物
①カンガルーは目や耳がよいらしい
②気配りのできるイメージ
③いざというときは強そうな感じ
ちなみに僕はカンガルーとして働いています。
という理由らしいです。

#WTDC
自己紹介:フロントエンドエンジニアとして
Webディレクションだけでなく、多拠点展開や紙モノ
イベントの企画やパッケージデザイン等何でも出来る会社です

#WTDC
【スキルパラメータ（厳し目）】
HTML/CSS:       ★★★★☆
CMS(WP/MT):  ★★★☆☆
JavaScript:        ★★☆☆☆
AI/PSデザイン:   ★★☆☆☆
ディレクション力:   ★★☆☆☆
解析・広告・SEO:   ★★☆☆☆
＼広く浅い器用貧乏だよ／

#WTDC
＼肩書はエンジニアだけど、色々な業務が発生するよ／

#WTDC
＼肩書はエンジニアだけど、色々な業務が発生するよ／
HTMLコーディング
バナーデザイン
電話応対
訪問・打ち合わせ
見積もり作成動画編集
請求まとめ
議事録づくり SEO広告
解析

#WTDC
経験が豊富で仕事の幅が広がるのはとっても良いことですが…

#WTDC
自分の時間を中々取ることができなくなってきました
＼うぉぉぉぉぉぉぉぉ／

#WTDC
前述が長くなりました本題です、

#WTDC
ライフハック術※超初級編
どんな方にもすぐ実践しやすい
時間の大切さを実感した僕がいつも行っている

#WTDC
ライフハック術　
①一人LINEでタスク抜け・情報管理
②スマホは時間制限を設定するべき
③スニペット化でコーディング
④休日更新はタイマーで自動化しよう

#WTDC

#WTDC
[Question]
このカラフルな線はなんでしょう？

#WTDC
A.Googleカレンダーのタスク表です

#WTDC
タスク管理ツールを使っても、
タスクがありすぎてタスク管理できてない
※厳密に言うと仕事のタスク、個人的な予定を分けるべき

#WTDC
ライフハック術 ①一人LINEでタスク抜け・情報管理
せめて個人の予定だけは管理しないと
いけないと思い、自分だけのLINEグループ
を作ってタスクが来た瞬間に自分に
メッセージを送るように改善しました。
【タスク管理としての使い方】

#WTDC
→

#WTDC
半年くらい前に”アナウンス機能”が増えて
LINEを開くたびにメッセージが固定表示
されます。

#WTDC
情報収集＋管理ツールといえば上記を使っている方が多いと思います。
【情報管理としての使い方】

#WTDC
しかし、ファボやいいねやポケット保存は見返さない事が多いですよね。

#WTDCライフハック術 ①一人LINEでタスク抜け・情報管理
後で読みたいニュース記事、つぶやき等
は一旦LINEに送信して、、

#WTDCライフハック術 ①一人LINEでタスク抜け・情報管理
1日の終わりにまとめてノートにまとめる
ようにしました。

#WTDC
①LINEは毎日見るツールだし
あとで見ない”あとで見る”がなくなって凄く便利！
【改善したポイント】

#WTDC
②日記感覚で楽しく続けられる

#WTDC
③EvernoteやGoogleカレンダーを
起動するより記述時間が早い

#WTDC
④毎日LINEが動いてるように見えるので
リア充感を味わえる

#WTDC
①誤爆して別なグループに送信してしまう時がある
【デメリット】

#WTDC
②定期的にバックアップを取らないと機種変で
ノートが消えてしまうかも

#WTDC

#WTDC
ライフハック術 ②スマホは時間制限を設定するべき
[Question]
皆さんは一日何時間くらいスマートフォンを使いますか？

iphoneの方は、設定の｢スクリーンタイム｣
Androidの方は、設定の｢デジタル・ウェルビーイング｣
から確認できます。

#WTDC
＼Youtubeやネットサーフィンしてたら日曜日が終わってたよ／

#WTDC
あるあるだと思います。あるあるだと思います。

#WTDC
TwitterもYoutubeもソシャゲも
情報収集として使うには最高の娯楽ですが、
1日の使用時間を制限して、スマホから
離れる時間を得るのもスマートなのでは！

#WTDC
設定方法をざっとご説明します。

#WTDC
→

#WTDC
制限時間を超えると
このようにグレーアウトされます

#WTDC
僕はこれで6時間
↓
2.8時間に利用時間が減りました
【改善出来たポイント】

#WTDC
①空いた時間に自然と本を読む習慣がついた
②LINEやTwitterってそんなに頻繁に見なくても
　状況に大きな変化はないと実感

#WTDC
①本当に緊急な連絡を確認できない
→その場合は無理やり解除ボタンを押す
②意外とSNSが使用の8割を超えているので、ただの板になる
→とりあえず天気を見る端末(10万)

#WTDC
PCでも同様のことが出来ます。

#WTDC

#WTDC
https://www.youtube.com/

#WTDC
PCで作業しなければいけないのに、
ついネットサーフィンしてしまう人
は是非お試し下さい！

#WTDC

#WTDC
ライフハック術 ③スニペット化でコーディング
WEBサイトのコーディングは
同じ記述を繰り返す事が多いですよね

#WTDC
①スライダー
②タブ切り替え
③ﬂexの横並び
④ふわっと出るアニメーション
⑤ハンバーガーメニュー
　　　　　　　　　　　　　　　　　　　　　　　　　etc…
例えば、

#WTDC
③どこかの案件でやったな…
②コードが思い出せない…
①また同じコードを書くのか…

#WTDC
そんなときはスニペットツールが便利です

#WTDC
windows Mac

#WTDC

#WTDC
デモを少しやります

#WTDC
①ふわっと出るアニメーション
②スライダーの実装
をスニペットから呼び出してみます。

#WTDC
・コードを覚えるのが苦手
・これから少しずつ覚えていきたい
というエンジニアの方は是非使ってみて下さい

#WTDC
＼デザイナー・ディレクターだよ～／

#WTDC
・メールの定型文
・Illustratorのショートカット画像
・ブログのWYSIWYGサンプルテキスト
等をショートカットすると良いかも！

#WTDC
デモります

#WTDC
実はこのスニペットはXmlで送ったり入れたり
出来るのです。

#WTDC
https://clipy‒app.com/

#WTDC
是非皆さんもスニペットソフトを使って、
僕と一緒にコードをシェアし合いましょう！
ポ○モン交換のように

#WTDC

#WTDC
ライフハック術　④休日更新はタイマーで自動化しよう
クリエイティブな業界の人は休日に
対応しなければいけない日がありますよね

#WTDC
エンジニアの僕の場合
商品の値段を変えたりする仕事が休日に発生します

#WTDC
カンガルーさん
＼4月6日(土)10時に変更お願いします／＼承知しました！／

#WTDC
「・・・・・・・・・」

#WTDC
「これは見積もりも高額に請求しなきゃ駄目だし、
出勤時間を考えると自分の時間が無くなりすぎている」

#WTDC
「PHPを使用して、CMS外のコンテンツも
時間経過で切り替えが行えるシステムを作れないかな」

#WTDC
<?php
    //日付を超えたら更新
    $selectdate = strtotime(date(‘Y‒m‒d HAYATE0804@I.SOFTBANK.JP:i’));
    // 本番サーバーは0分遅れなので ‒0 minute
    if ( $selectdate < strtotime(‘2019‒03‒07 22:00’ . “‒0 minute”) 　
&& !isset($̲GET[“test”]) ){
?>
<!— 日付超えてない —>

<?php }else{ ?>

<!— 日付超えた —>
<?php include($̲SERVER[“DOCUMENT̲ROOT”].”/404.html”); ?>

<?php } ?>
＼作れた！／

#WTDC
＼デモだよ！／

#WTDC
15時45分になると画像が切り替わります。

#WTDC
①このPHPタイマー実装後休日出勤が無くなった。
②タイマー記述もスニペット化して構築すると工数に負担が少ない
③FTPの時間があっていればどのサーバでも動くので、人間が更新
　するより正確

#WTDC
【反省点】
コードを考えたことと、休日対応がなくなったことが心地よすぎて
見積もりを30000円→5000円に下げて保守契約してしまった。

#WTDC
【反省点】
ピカソの絵と同じ感覚で、このシステムコードを考えたときの
工数と技術量が発生しているのです。

このコードはスライドと共に配布しますが、実装の際は見積もり
はそのままもしくは、上乗せして請求してみてください。

#WTDC
まとめ

#WTDC
今回はこの４点をご紹介しました。

#WTDC
クリエイティブな仕事をしている方へ将来時間
を確保するのが難しくなったらお試し下さい。

#WTDC
今現在時間の確保が難しく大変な方は、

#WTDC
「定時に帰って○○やろう！」と願望を持つことが大正義です。

#WTDC
共感してくれた方、
どんだけ日々タイムアタック何だ・・・
と思った方それぞれに何かしらの知見になれば幸いです。

#WTDC
上手くお話できなかったと思うので、
懇親会に参加できる方は是非お話しましょう！

#WTDC
＼フォローお願いいたします！／

#WTDC
＼デモタイマーの中身は本日お見せしたスニペットで是非お試し下さい！／

#WTDC
ご清聴ありがとうございました！

WTDC Meeting #01

Recommandé

Recommandé

Contenu connexe

Similaire à WTDC Meeting #01

Similaire à WTDC Meeting #01 (20)

WTDC Meeting #01