【Web業界】新卒入社1年目の思い出と今思う11のこと。

初心に返るためこの業界に入ったときの思い出や今感じていることを述べたいと思う。 これからWeb業界で働きたい方や就活生の参考になればと。

11のことって多いけど、とりあえず駄文をダラダラと連ねてみる。

【その1】横文字やカタカナが多すぎ問題。

Web業界に限らずかもしれないが、何せ横文字やカタカナが多い。

• 「これコミットしておいて！」
• 「このタスクは..」
• 「エビデンスは？」
• 「アサインして～」
• 「アジャイル開発や」
• 「MTG（ミーティング）」
• 「オンスケやで～」
• 「リスケで。」
• 「キックオフするぞ！」
• 「クリティカルだ」
• 「スコープは？」
• 「ナレッジ共有」
• 「ハレーションしてるやん」
• 「FB（フィードバック）は？」
• 「フィックスで！」
• 「フェーズ１をスタートします」
• 「ブレストしよう。」
• 「この開発におけるベストプラクティスは？」
• 「ペルソナを決めよう」
• 「ボールを持ってんの誰？」
• 「マイルストーンはいついつです。」
• 「マージしといて」
• 「●●マターでお願い」
• 「ユーザーを意識して～」
• 「リスクヘッジしよう」
• 「リテラシー低くない？」
• 「ローンチされた！」
• 「リソース足りねぇー！」
• 「ペンディングしておきます。」

英語ばっか使う無国籍ラップ！
日本語に心動くべきだ！
ジャパニーズヒップホップじゃねえのかよ！

とキングギドラからもツッコミが入りそうなくらい横文字が多い。
業界の背景から仕方がないのかもしれないけど。

新卒1年目の時は「何言ってんだこいつ。ルー大柴か！」と腹の中で思いつつ、必死にその言葉をググっていたなー。
「パディング」「ペンディング」「ペッ●ィング」とごっちゃになっていたのが懐かしい。

もちろん、今ではめっちゃ多用している。

【その2】挨拶が返ってこない。

元々体育会系出身の私は【礼に始まり、礼に終わる】で生きてきたこともあり、これは衝撃だった。
ただ、会釈や今でも消えてなくなりそうな声での挨拶は返ってくる。
たまに元気な人の挨拶だけは、職場に鳴り響く。

制作現場なんか特に静かだ。
静か過ぎて気が狂いそうになったのを覚えている。

大分この静けさに慣れてきたが、それでも今でもお声がけや挨拶は心掛けている。
うざがられてるかもしれないけど..

【その3】わずか50cmとなりの席からメールでお説教される。

これは本当にびっくり。
口で説教すればいいのにメールでお説教される。
しかも、共用メール（皆が見れるメール）で怒られる。（＝晒される。）
こちらとしては、話しかけて謝った方がよいのか、メールで返信した方がいいのかわからない。

マジで悩んだ。

その時は口頭で「申し訳ございません。」と言ってみたが話すとそんなに怒っていなかったり。
メールの文章から受ける印象と口頭での印象ではかなりの差があった。

これが原因で、神経性胃炎(※)になったのを覚えている。
常に喉に詰まりものがあるような状態で、吐き気とゲップが止まらなかった。

コミュ症の人が多いのか、こういったメールでお説教する人が多い気がする。
何かあったら口で言おうぜって今でも思う。

※ 不安や緊張などのストレスにより自律神経のバランスが乱れ、胃の不調をきたした状態。
　 精密検査をしてもどこも悪くないため、通称イモと呼んでいた。

【その4】超有名企業やWebサイトや芸能人などの画像を扱える。

え！このサイトもウチが！？みたいな感動が味わえる。
世の中に出ていない情報を先に知ることができたり、芸能人の画像を加工できたり。
社外秘のため周りに言えないけど、世の中に出た時に優越感に浸れる。

【その5】学歴不問！やった分だけ力になる世界。

やったか、やってないか。
やった分だけ力になるし、ソッコー学んだ技術を仕事で活かせる業界だと思った。
有名国立大学を出たとか、有名私立を出たとかそんなん関係なくて。

新卒一年目のときは、寝る間も惜しんで勉強していた記憶がある。
明らかに周りとレベルが違いすぎたから。
一時期は学歴コンプレックスを抱いたりもしたけどそんなの関係ないことに途中で気付いた。

やってるか、やってないか。
手を動かしたか、動かしてないか。

超絶シンプル。

やったら、力になる。

Web業界に限らずかもしれないけど。
このブログ然り、今でも継続的に学習は続けている

【その6】好きなことをガチで仕事にできる。

Web制作やパソコンでモノづくりが大好きな人にとっては天職かもしれない。

パズルを組み立てていくような感覚。
まるでゲームをやっているかのような。

そこにはタイムリミット（納期）が設けられていて、たまに徹夜したり、クッソ残業したり、
そういう意味では、趣味の延長に近いような感じ。

逆に好きじゃない人はこの業界に来るべきでないと思う。
多分苦痛でしかないし、別の道を歩むべきかも。

早々にリタイアする人は、大体好きじゃない人が多い印象。

※※注意※※ その能力が会社に平等に評価されるかどうかは、会社によるので知りません。

【その7】Googleに載っている情報がもはや自分の能力になる。

周りの先輩方が忙しすぎて自分で調べるしかなかったのを覚えている。
そして、気付くとググる能力がめちゃくちゃついた気がする。

個人的な見解だが、質問に対してググって答えれればもう自分の能力だと思ってよいと思ってる。
覚えることが多すぎる業界なので、全部覚えることは不可能。
なので、どれだけ迅速にググって正しい答えを導きだせるかが大事かと。

何度も同じような内容をググっていれば、知識として頭にも入るし次回以降に活かせる。
まさに、Google先生のデータベースがもはや自分の能力の一部になると思う。

【その8】新しい技術やモノが大好きで、自発的に学習できるかが肝

なんだか、採用情報に記述されていそうな内容だが、
業界的に移り変わりがめちゃくちゃ激しいのでこれは本当に大事なことだと思う。

新卒の時に一生懸命学んだ技術（例：古いブラウザへの対応など）は、今となっては使い物にならないものが多い。
この業界では、そういった使いものにならないものは切り捨て、新しいものを取り入れていく姿勢が常に必要だと思う。

【その9】時間に対する認識が甘くなる傾向。

• 朝の出社時間、体調が悪く遅刻してくる人が多い。
• 打ち合わせ時間への遅刻が多い。
• 残業（業務時間）に対する意識の低下。
• う●こ長すぎ（たまにいびきが聞こえる）
• 勝手に休憩し始める。

そんな印象を入社したときに感じた。
「遅く残っている人がえらい」みたいな風潮も存在したりする。（IT業界にありがちなやつ）

残業に関しては二種類存在すると思う。

1.単純に業務量が異常
2.能力がない

1.の場合は、周りが助けるべきだし、仕事量を分散させるべき。
2.の場合は、「事前にやれ！学べ！」としか言いようがない。

会社側の理解や評価も大切かと思う。

【その10】10年後にどうなっているかわからない業界

入社したときに抱いた気持ち。
「この業界10年後どうなってんだろう...。」
漠然とした不安だけが頭に過ったのを覚えている。

今は、別にそこまで不安に思わない。
なぜならいきなり10年後はこないから。

1年、2年、3年、...と積み重なった上で10年後がくるわけで
その都度、未来を見据えつつカメレオンの如く時代に合わせて自分の能力を磨いていくしかないから。

生き残りたいならやるしかないよね。

【その11】SNSには気をつけろ。

どこからばれるかわからないけど、会社の人はめっちゃ見てくる。
終いには、「どこどこ行ったんだって？」とか嫌味を言ってくるやつもいる。
また、Web戦闘能力が人の25倍くらい高い人が多いため、晒し上げられることもある。

すごい嫌な思いをしたのを今でも鮮明に覚えている。
結果今は、ネット上にはまじめなことしか言わないようにしている。（← チキン）

ソシャハラ、ダメゼッタイ。

振り返ってみて。

色々あったなぁ。 結構リアルな部分も多いけど、少しでも参考になればと思います。

※本記事の意見や見解は、個人の立場において記したものであり、所属組織等を代表するものではありません｡

'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

webpackを使用したら少しハマったので備忘録。

各バージョン・環境

Windows 10
- node : 8.9.0
- npm : 5.8.0

※ nodeのバージョン管理に「nodist」を使用。

実行した手順。

①実行したいプロジェクトのディレクトリに移動し、以下のコマンドを叩く。

npm init -y

よし、package.jsonが生成された！！

②続いて、webpackを実行するために本体をインストールする。

npm i -D webpack webpack-cli

よしよし、node_modules やら package-lock.jsonやらが生成されたぞ。。

③エントリーポイントをビルドしてみる。

npx webpack

'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

ゲェ～～～ン！
え？なんで？と思い、ググる。。
“Node.jsをバージョン8.2.0以降、npxはnpmにバンドルされているため、npxの個別インストールは不要”
ん...？なのになぜ動かぬ。。

おそらく原因は、nodist

しょうがないのでnpxを直接インストール

npm install -g npx

改めてコマンドを叩く。

npx webpack

シャキ～ンッ！

無事にコンパイルされました。
現場からは以上です。

参考サイト
https://ics.media/entry/12140
https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d

【JavaScript】2回目に訪れたユーザーに何かしたいとき。

データーベースで制御することも可能ですが、フロント側だけでやるのであれば、Cookieで制御するのがよいかと思います。

cookieで制御してみる - サンプルソース

//Cookie取得
var checkCookie = document.cookie;

//Cookie内に【XXX】という文字列があるかないか判定。
if(checkCookie.match("XXX")){
  /* =====================================
    2回目の訪問したときの処理
  ========================================*/
  
  console.log("2回目ですね。")

}else{
  //Domain名取得
  var domain = document.domain;
  //Cookieの内容を格納
  var visitorCookie = "visitorCookie=XXX; domain="+domain+"; path=/;"
  //Cookieに書き込み
  document.cookie = visitorCookie;
  /* =====================================
    1回目の訪問したときの処理
  ========================================*/
  
  console.log("1回目ですね。")
  
}

Cookieを取得しその中に1回目に訪れた時のCookieがあるかないかを判定して、無ければ初回の訪問、あれば2回目の訪問として処理を行う。
上記のソースの場合、cookieの有効期限は、セッション限り（ブラウザを閉じるまで）になっている。

Cookieを保持させたい場合は、以下のように指定

var visitorCookie = "visitorCookie=XXX; max-age=秒; domain="+domain+"; path=/;"

＜例＞半年の場合

var visitorCookie = "visitorCookie=XXX; max-age=15552000; domain="+domain+"; path=/;"

【CSS3】ふわっと始まりふわっと終わる。

お久しぶりです。
すっかりCSS3のアニメーションは当たり前のように使われる時代になりました。
少し意識した組み方をすることで、グッとよくなったりします。

以下のサンプルをご確認ください。

ふわっと現れ、パッと消える - パターン1

DEMO

https://codepen.io/takumaro-web/full/ooQeaw/

cssにてdisplay:noneを使用しているものになります。
パッと切り替わっているので少し目に優しくないのと違和感を感じます。

ふわっと現れ、ふわっと消える - パターン2

DEMO

https://codepen.io/takumaro-web/full/VrVzqM/

cssにてvisibility: hidden; ⇄ visibility: visible;でアニメーションをしているもになります。
パターン①より、違和感を感じずスムーズな見え方になります。

display:none;とvisibility: hidden;の使い分け。

display:noneの場合、要素自体なくなってしまうので、アニメーションをさせるのは難しいです。
この場合は、visibility: hidden;を使って要素はあるけど見えない状態をつくることでアニメーションが可能になります。

【少しの記述で表現は変わる。。】

現場からは以上です。

【JavaScript】jQueryのthisを生のJSで表現してみる。

jQueryのthisって便利だよね。

これに対するこれって感じでめっちゃ便利だけど、生のJSで実装する場合、
どうしたらよいんだろうかということで、書いてみた。

知人がつくったALT FRIENDSというページを基に書き換えてみる。

ALT FRIENDSは、画像に対して右クリックを押すとaltが表示されるという、画期的なページです。
これはjQueryで実装されているので生のJSに書き換えてみる。

元ページ

See the Pen ALT FRIENDS by Nasu Alipey (@alipeyoff) on CodePen.

JSの記述

$(document).ready(function() {
  //入力
  var $clickMeElement = $('#haltest img');
   //クリック動作
    $clickMeElement.bind('contextmenu',function() {
    $imgAlt = $(this).attr("alt");
        alert($imgAlt);
    });
});

＃haltest img を定義し、バインドさせ該当の画像の上で右クリックをしたら、alt値を取得しアラートを出す。

thisってやっぱり便利ですね。

これを書き換えていきます。

JSの記述

const IMG = document.querySelector("#haltest");
IMG.addEventListener("contextmenu", function(e){
  if(e.target.alt !== undefined){
      alert(e.target.alt);
   }
});

jQueryのthisは、生のJSでは使用できないのでまず、親要素を指定しています。
親要素内で右クリックを押して、もしalt値があれば（＝画像）でalt値を取得しアラートを出す。

これで完成！！

書き換えたもの（フォーク）

See the Pen ALT FRIENDS by paradox_tm (@takumaro-web) on CodePen.

これくらいの処理であれば、重いjQueryを読み込むよりもクッソ処理は高速になるかなーと思います。

それでは。

Smooth Scroll (スムーススクロール)、Androidで重い問題。

あけましておめでとうございます！
一発目の記事です。

ということで本記事のタイトル通り、【Smooth Scroll(スムーススクロール)、 Androidで重い問題】についてみていきたいと思います。
よろしくお願いします。

以下のサイトのソースを基にみていきたいと思います。

techacademy.jp

引用ソース

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

このままだと一部、Androidでスムーズに動かないことがあります。（iPhoneは比較的スムーズ）
例えば、画像リンク→ページ内遷移（スムーススクロール）→ページ下部へみたいな動きのときはもっさり感が半端ない。

原因と解決策

なぜこんなにもっさりしているのか...

それは..

Click イベントを使ってるから！

前も言ったかもしれませんが（言ってないかもしれません）モバイルブラウザにおけるclickイベントってかなり重いです。
理由は、Touchイベント,Mouseイベント,Keyboardイベントなど、これらのイベントをすべてclickイベントでは、網羅してしまっているからです。
結果、処理に時間がかかってしまうんですねー。
逆にアクセシビリティ対応をするのであれば、clickってかなり便利だったりするけど...。
（それぞれの処理に対してハックする必要がないので）

解決策ソース：モバイル向け！

$(function(){
    // イベント登録
    $('a[href^="#"]').on('touchstart touchmove touchend', function(event){
        // タッチスタートでフラグを設定
        if ('touchstart' == event.type){
            $(this).attr('data-touchstarted', '');
            return;
        }
        // タッチムーブが発生したら、フラグを消す。(タップと判定させない為)
        if ('touchmove' == event.type){
            $(this).removeAttr('data-touchstarted');
            return;
        }
        // タッチエンド時にフラグがあれば、タップと判定する。
        if ('undefined' != typeof $(this).attr('data-touchstarted')){
            var speed = 500;
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top - 20;
            $("html, body").animate({scrollTop:position}, speed);
            // フラグを削除
            $(this).removeAttr('data-touchstarted');
            return false;
        }
    });
});

touchstart touchmove touchendをそれぞれバインドさせ、
タッチスタート＝タッチエンドの時をユーザーがタップしたと判定させ動かしています。
結構、昔から使っている手法だけど、改めて共有ということで...。

PCに対応させたいときは、UA判定で分けてもいいかもですね。

それでは、この辺で。

2017年を振り返って。

PCの前で瞬きをしていたら、あっという間に2017年が終わってしまいました。
皆様いかがお過ごしでしょうか。

今年もざっくりこの1年間を振り返ってみたいと思います。

2017年のできごと。

組織の変更によりフロント側の人間へ。

今までは制作メインだったけど組織の変更があり、フロントに立つ事が多かった1年だった。
プロジェクトの管理・立ち上げ・企画・制作・提案・ディレクション...最初の頃は色々苦悩があったなぁ..。
自分の意見を言っていいのかどうなのかと自問自答したり、進行管理がうまくできなくて悩んだり..

制作もディレクションも両方できるにこしたことがないし、今後もその能力については高めていきたいと思う。

個人の活動では、知り合いのデザイナーさんに案件を振っていただいたり、
某コミュニティのリニューアルに0から携われたり、大分有効な時間を過ごした気がする。

あ、そうだ。 去年のブログから...目標を確認をしてみよう...。

paradox-tm.hateblo.jp

• 英語： △
• 自分のポートフォリオサイトの開設：×
• アドベントカレンダーへの参加：×
• オリジナルのステッカーをつくる：×
• 家にBARをつくる：×
• LINEスタンプの作成：×

なるほど。。そんなことを考えていたのか自分は。

2017年の目標を振り返って

• 英語： △
• 自分のポートフォリオサイトの開設：×
• アドベントカレンダーへの参加：×
• オリジナルのステッカーをつくる：◎
• 家にBARをつくる：×
• LINEスタンプの作成：◎

英語について

やっぱり、外国人とコミュニケーションをとりたい！という理由だけだとモチベーションが持続しないなぁ～。と言い訳...。
環境のせいにしたくないけど、英語しか使わない環境にいっそのこと足を踏み言えれて自分を追い込みたい気分ではある。

ただ、ハワイに行く機会があり現地の人に自分がつくったステッカーをあげたり、SNSで友達になれたのはよかった。

自分のポートフォリオサイトの開設

これやるやる言っててできてないやつ。。
来年は本気出そう。

アドベントカレンダーへの参加

不覚にも気付いたら、終わっていたという。。
別プロジェクトで忙しかったのでしょうがない。。。と言い訳...。

オリジナルのステッカーをつくる

これは実現した！来年は、もっとつくっていきたいし、いろんな人にプレゼントしたいなぁー。

家にBARをつくる

あ～これもできてないなー。。。なんか別にもういっかなーって感じでw

LINEスタンプの作成

こちらは実現できた！！来年も2～3個は、つくっていきたい！

2018年の目標

• 自分のポートフォリオサイトの開設
• ブログを12ヵ月分ちゃんと書く！
• セミナー・勉強会の主催・実施！
• オリジナルのステッカーをつくる！
• LINEスタンプの作成！
• 他業種への技術支援！
• 個人の活動の充実！
• コネクション強化！
• アドベントカレンダーの参加！
• 技術力向上・マネジメント力の向上！

おかげ様で購読者も5人→11人へとなりました。
ありがたいことです。

今後とも宜しくお願い致します。
ではよいお年を。