徒然畑

徒然なるままに。

SIerのSEがWeb制作会社のフロントエンドエンジニアへの転職を決めるまで

どうもです。今日もとり天が美味しいです。

この記事は転職アドベントカレンダー14日目の記事としてお送りします。

adventar.org


10月末から転職活動をしていた私が、この先ここで頑張ろうと思える会社に出会うことができ、今週内定受諾しました。
転職活動は終了ということで自分のこれまでの振り返りの意味も込めて転職レポを書こうと思います。

私について

SIer企業でSEを3年ちょっとやってきた人間です。
業務用Webアプリケーションの開発に2年ほど携わり、今は開発を担当したアプリケーションの運用担当としてお問い合わせ対応とか小規模改修対応とか工数見積もりとかをやってきました。
現在のメイン言語はJava、ほかにはC#とかを扱ってました。
現場のシステムの都合で今年からCとかシェルとかも見たり触ったりしだしましたが、一向にデレる気配を見せないままお別れしそうな予感です。

元々高校時代は理系にいましたが、物理が最後までデレてくれなかった&英語はめちゃデレてくれたという理由で文転した文系学部出身で、大学ではデザイン史を専門に勉強・研究していました。
中学くらいの時に友達とホームページ運営ちょっとやったりタグとかCSSいじったりしたことがきっかけで情報系に興味を持ち、大学在学中に約一年ポーランドにある情報系の大学に交換留学に行ってました。

小さい頃から何か手を動かしてものを作るのが好きなこと、
特に絵を描くのが好きで、グラフィックデザインとかWebデザインとかに派生して興味を持ったという経緯から、就職活動時はSEとWebデザイナーの2つを軸に進めていましたが、最終的にご縁があったのがSEの方でした。

転職しようと思ったきっかけ

遡ること去年の8月頃、お偉いさんとの面談で「この先どういうSEとして社内でやっていきたいんだ?」と3年目を迎えるとよく聞かれる質問に対し「そもそも私この先もこの会社でこの仕事でやっていきたいのか?」という疑問に直面したのがきっかけです。
そして色々考えた結果、

  • 仕事で一番楽しいなあと思った瞬間は自分の手でプログラムを書くことだということ
  • 自社の「カタイ感じ」(基本同じ言語しか使わない、割とみんな安定思考、年功序列な雰囲気)がなんとなく合わなかったこと
  • 就活時代にWebデザイナー目指して企業に採用応募をしまくったこと
  • そもそもプログラミングとかに興味を持ったのは中学時代にHTMLとCSSをいじったことがきっかけだったということ
  • そもそもデザインとかビジュアルとかに昔から興味があって大学でもデザイン史やウェブ広告の研究をしていたということ

 →やっぱりWebデザインに関わる仕事がしたい!

という結論に至り、「転職してSEからWebデザイナーになる」を今年の目標に掲げました。

転職準備をどうするか

そうとなったらWebデザイナーとしての勉強をしよう作品を作ろう、ということであえて専門学校に行ってみることにしました。
入る前に色々調べたんですけど、今の時代オンライン学習サイトもあるしその気になれば独学である程度スキル身につけたり作品作ったりができます。
だけど私は

  • 同じ志を共有する仲間が欲しい(そして「自分も負けたくない」と思わせる環境が欲しい)
  • 現場のデザイナーとの繋がりが欲しい(講師はもちろんのことステップアップのためにWebを学びにきているデザイナーさんも生徒にいるとのこと)
  • 一人だとダラける可能性が高い(コツコツやるというのが苦手&短期集中が得意な人間は集中できる環境や体制を構築した方がいい)
  • 一度くらいデザイン系の学校行ってみたかった(これは感情的理由。美大行きたかったけどお金がかかりすぎることを理由に断念した人間なので)

という4つの点からスクールに通う選択をしました。

私が最終的に通おうと決めたのはこちらの東京デザインプレックス研究所です。

www.tokyo-designplex.com

デザプレ含めて3つくらい話聞きに行ったんですけど、対面クラス授業形式で先生一人が生徒10人くらいの面倒を見る、という体制を取っているのはここだけだったので、仲間が作りやすい&先生に何かあれば質問しやすいと判断してここにしました。

スクールに通ってる期間中の活動

結果としてここに入って良かったと思っています。
同じクラスの人たちの作品クオリティやレベルが高かったことと、スクール卒業後も一緒に励まし合いたいと思える友人との出会いがあったので、刺激ときっかけをここでもらいまくりました。

あとスクールにお金を投資した分危機意識が芽生えたのか「通うだけで満足したらダメだ」と授業外の活動も活発になってました。
主にやったこととしては、Webサイト以外の作品や制作、そして勉強会や交流会への参加です。
自分の名詞だったりLINEスタンプだったりバナー制作だったり動画制作だったりを平日仕事が終わってから作りつつ、今まで参加したことがなかったWeb系の勉強会やクリエイター交流会などに足を運ぶようになりました。
特に勉強会や交流会に参加し出したことで、今まで出会うことがなかったデザイナーさんやフロントエンドエンジニアさんなど様々なジャンルの方にご縁ができたのは自分にとって一番大きかったです。単純にスクールだけ通っていたら得られない情報や考え方を獲得できたのも、こういった場に参加したおかげです。

  • 学びの場は一つに限らず複数の手段を持つこと
  • 現状の環境に満足せずいろんなものに出会おうと行動すること
  • 常に自分が尊敬できる人、すごいと思う人と近い距離に居られるような環境を作ること

スクールに通っていた頃はこの三つを無意識のうちに意識していたような気がします。
そしてこれらは、今後の私の活動においても意識していきたいことです。
(ここら辺の具体的に何を作ったりどんな勉強会行ったりの話は後日公開予定のブログにて書こうと思います)

スクールを終えて転職活動に入る頃

実際にスクールに通ったのは半年強くらいでした。
色んな勉強会に出たりネットでWeb系の記事を呼んだりしながら9月に授業を終えたころには私の中で心境の変化が起きていました。
それは「フロントエンドエンジニアという選択肢もありなのかも」ということ。

実はフロントエンドエンジニアという職種を認識したのは勉強会に参加し始めてからでした。
とある勉強会のフロントエンドエンジニアさんのお話を聞く機会があり、その方のユーザーがWebサイトを快適に閲覧するための技術や、モバイルファースト時代に合わせた技術の具体的な使い方を紹介している姿を見て、とても魅力的に感じたのと同時に「Webデザイナーとエンジニアの境目ってなんだ?」と感じたのです。
そう思った背景には2つの要素がありました。まず1つはコーディングの知識を持っていることがWebデザイナーの前提条件であることに加え、今後ますます技術力を持っていることが求められると感じたこと。もう1つは昨今のWebサイト構築が段々と今関わっているアプリケーション開発と変わらないように思えたことです。そういった中でWebデザイナーの存在感を見出すのは今後難しいのかも、と個人的に感じました。

そもそも私は、色んな勉強会やスクールでの学びを経て、「デザイナー」という仕事は「クライアントの目的に沿い、かつエンドユーザの体験に貢献するための最適なものを提案するプロ」という風に捉えていました。
そしてその姿勢が私が目指したいものだと感じていたので、そういう意味だとフロントエンドエンジニアもWebの体験をコーディネートするプロだし、ビジュアルに関わりつつ、細かい作り込みを追求できるのもこの職種なのでは?と感じたのです。
技術もデザインも好きで、できるだけその両方の要素を潰したくないと感じていた私にとっては、フロントエンドエンジニアとしてのキャリアチェンジもありなのかも、と思うのは無理もなかったのかなと感じています。

転職活動、そして内定

転職活動期間としては1ヶ月ちょいでした。
転職活動に入る前に今いる会社には今年度いっぱいで退職する旨を伝えていたので、「この月は転職活動月間だ、決めるぞ」と思ってばーっと集中して動いてました。
基本的には複数のエージェントや転職サービスを使いながら転職先にエントリーを行なっていました。あとは個人的に気になった会社のエントリーフォームに出したりしてました。

結果として3社内定をもらいましたが、内定を決意した会社の決め手は「働く人」「環境」「作品のレベルの高さ」でした。
特に印象的だったのは、Webデザインの勉強がてらに見かけた「すごい!」と思ったWEBサイトの製作に関わった方に面接官としてお会いできたことです。
面接を受けることになる前までその会社が作ったということを知らなかったので、これは何かの縁だ!と思い勢い余って色々質問してしまいました。
そしてその方々から「つくることが好き」「真剣に楽しむ」「全力なプロ意識」を感じ取り、その会社にいる人の特徴や姿勢、大事にしていることに共感や魅力を感じて、私もここで全力でチャレンジしたいと思うようになりました。
その思いを最後まで素直に伝えた結果、内定をいただくことができました。

転職活動を終えた今だから言えることですが、私は面接に臨む際に「面接官として出てくる方は、その会社を具現化した鏡だ」と思ってお話ししていました。
特に役員やリーダークラスの方が面接官として出てきた場合、今面接を受けている会社の価値観に沿ってみたときに、それだけのポジションを与えるに値する人間だと判断された人がどういう方なのかを知ることができるとてもいい機会です。
もしその人に自分が尊敬の念や共感を覚えたなら、その会社と自分がマッチする可能性が高い。その観点から見ても内定を承諾した会社と自分は何かしら縁があるとひとり強く感じています。

これから

そんなわけで1月からフロントエンドエンジニアとして新たなスタートを切ります。
正直なところ、楽しみ半分、緊張半分、加えて全力でやるぞ100%な気持ち、というよくわからない心境でいますが、そうやって全力で取り組みたいと思える会社に出会えたのは幸運です。
来年の今頃にはさらにパワーアップしている自分になるように、来年もまた邁進していきます。
楽しむぞー(`・ω・´)

とり天 -My Best Fantastic Food-

突然ですが皆さんはとり天を食べたことがありますか?
ないならぜひ食べましょう。
あったとしてもぜひ食べましょう。

とり天との出会い

とり天ーーー南は九州の大分県発祥のローカルフードであり大分県民のソウルフードであるこの天ぷら。
私ととり天はちょっと変わった出会い方をしています。
というのも、一番最初にとり天の存在を知ったのは、漫画なのです。

鹿楓堂よついろ日和 2巻 (バンチコミックス)

鹿楓堂よついろ日和 2巻 (バンチコミックス)

和風喫茶で働く四人のイケメンスペシャリストと喫茶店に訪れるお客さんたちとのストーリーを描くウルトラ飯テロスイーツテロ漫画なのですが
この巻の第6話で振舞われたとり天丼が妙に美味しそうに見えたのが始まりです。
しかもこの巻末のあとがきで作者さんが「予想以上に美味しすぎて思わずとり天に謝る」一コマをみてこいつはやべえ奴がいるぞ・・・と思ったのが第一印象でした。
(ところで鹿楓堂よついろ日和2018年にアニメ化決定したそうです!おめでとうございます!)

そしてそんなファーストインプレッションから少し経ったある日…
業務でふらふらになった昼休み、たまたま見つけた天丼屋でたまたま期間限定で売り出されていたとり天丼を注文した私。
一口食べた瞬間感じたことは
「力が。。。みなぎってくる。。。!」
超スピードで瀕死状態からHP値MP値共にMAXになってその後の仕事をバリバリこなした驚異の一品、とり天。
以来すっかりとり天の虜になりました。

今年ヘビロテした罪深きとり天写真

そんな感じで今年は私の中でとり天とり天とり天大フィーバーしまくって
Twitterにそのうるささを吐き出さないように自制心が働いてアプリをアンインストールしたほどだったのですが
たまたま今回「今年食べた最高のご飯の写真Advend Calender」を見つけてしまったので
せっかくなので普段抑圧していた私のとり天フィーバーを放出します。

天や 柚子こしょう鶏天丼

f:id:mio_U_M:20171204225524j:plain

ご覧ください、こいつが私をとり天フィーバーに叩き落とした張本人です。
いつみても綺麗な顔していやがって...(号泣)
では早速罪深いポイントを上げていきましょう

ポイントその1:ボリュームたっっぷり!しかも3種類?!のとり天

そもそもとり天って普通の天ぷらとどう違うの?と感じる方もいらっしゃるかもしれません。
とり天の特徴はあげると鶏肉がふっくら厚みを増してジューシーになり、
だけど味は衣で包んでいるのでぎとぎとしないしっとりした味わいになるのです。
サクサク、ジューシー、しっとり。このトリプル体験を一枚で味わえる驚異的な存在がとり天なのです・・・!
しかも天やのとり天は通常のとり天より大きめなのでな上に「とり天2枚とつくね天1枚」がデフォルトなので満足感の持続力が違います。

ちなみに・・・あくまで私の食べた感じで、ですが
この二枚どうやらムネ肉とモモ肉をそれぞれ使っているみたいなのです。
ただし天やのWebサイトを見まくりましたがムネ肉とモモ肉それぞれ使っていますとは一言も書いていないのですが、どう考えても二枚の食感と味が微妙に違う。。。
これはムネ肉とモモ肉それぞれ使っているのでは…こいつ、さらっと3種類のとり天をお客様にサービスしている・・・?!
と天やの恐ろしさ(褒めてる)に慄きながら食べていました。
※ただしあくまで個人的な推測です。実は二枚ともムネ肉だよと言われたらもっと利きとり天修行に励みます。

ポイントその2:魅惑の温泉卵と奏でる絶妙ハーモニー

天やの通常のとり天丼だとシンプルにとり天が乗っているだけですが
私は温泉卵乗せを注文することをおすすめします。
鳥と卵、親子が織りなすコンビネーションの味わいの破壊力が凄まじいのです。
温泉卵をチョン、と割るととろりと溢れる黄身をとり天に絡ませて食べると口の中で鶏肉のジューシーさ、衣のサクサク感がさらに引き立つのです。
親子丼、鶏肉と卵の相性がとても良いですよね。それは鶏肉を揚げても同じことが言えるのです。

ポイントその3:ほのかに香るゆず胡椒の奥ゆかしさ

天やの勘所が素晴らしいと思ったのが味付けにゆず胡椒を使っているところです。
甘だれに馴染むほんのりゆず風味のおかげで、ご飯と食欲ととり天が進むこと進むことこの上なし。
ゆずは和食との相性がいいことで定評がありますが
(ゆず風味の味ポンとかゆずの皮入りの浅漬けとか私はめちゃくちゃ好きです)
それはとり天においても例外ではありません。
天ぷらの油みをあまり感じることなく爽やかな味わいになっているのは
このゆずの存在があってこそ、とも言えます。
(ちなみに天やで使われている油は植物油なので、体に重くならないのも嬉しいポイントです)


ちなみにちなみに。
この華味鳥のとり天丼は期間限定のため今は販売していないのですが
現在は嬉しいことに期間限定でふもと赤鶏のとり天丼が発売されています!
www.tenya.co.jp

先日私は究極な腹ペコ状態な時に食べにいきましたが、こちらもこちらでめちゃくちゃ美味しかったです。
(あまりに空腹状態だったため写真を取り損ねたことをお詫び申し上げます)
どうしようとり天丼食べたくなっちゃった。。。と言う人はこちらをぜひお試しを!

やよい軒 とり天とだんご汁の定食

f:id:mio_U_M:20171204232412j:plain

寒さが身に沁み出すころに現れたのは、やよい軒の大分味わおうなこの定食でした。
この定食の罪深いポイントを挙げていきましょう。

ポイントその1:揚げたてサクサク!なとり天

やよい軒がこの定食に関してうたっているのが「注文してから揚げる、できたてのとり天」
なので歯ごたえサクサク、中はジュワァ、なとり天が堪能できるのです。
鶏肉のジューシーさと天ぷらの衣のさっくり感が絶妙なハーモニーを奏でており、これだけでまず疲れやストレスが約40%吹っ飛びます(当社比)
そのままガブリと行くのもよし、ポン酢につけて味わうのもよし、
さらにゆず胡椒もセットでついてくるので、お好きな方はゆずごしょうと一緒に食べてもよしなのです。

ポイントその2:一口飲めば故郷が広がる。懐かしのだんご汁の味

そしてこの定食、そもそもはとり天定食、ではなく、大分の郷土料理を味わうことをテーマにした定食なので
とり天と同じくらいに存在感があるのがだんご汁です。
実は私はこのやよい軒のとり天定食で初めてだんご汁を食べたのですが
食べた瞬間目の前に田園都市風景が・・・
と言ったらちょっとヤバい食べ物じゃないかと思われてしまいますが
もうちょっとくだいて言うと、日本人によくなじみのある味噌汁とうどんのいいところを掛け合わせて作り出された、胃腸に染み渡る味わいなのです。
そしてこのだんご汁には付け合わせのゆず胡椒がとても合います。
味噌と野菜、そしてゆず胡椒のほんのりスパイシーさを麺に絡めて食べるとこの上なく幸せな気持ちに浸れますのでおすすめです。

ポイントその3:ご飯がもっと食べたくなる!ご安心ください、ご飯おかわり自由です

私が住んでいた家の近所にはやよい軒大戸屋がどちらも徒歩圏内にあるというあからさまな定食屋戦闘地域だったのですが
私は迷うことなくやよい軒派でした。
というのも、やよい軒はご飯おかわり自由!
とり天やだんご汁を食べていると思わずその味わい深さにご飯が進んでしまうはずです。
心ゆくまでご飯も食べたい人にとってもオススメなのです。


こちらも期間限定で現在は販売を終了している模様なのですが、
どうも毎年この定食は期間限定で販売している模様なので
一度は味わいたい!と言う方はやよい軒の情報をぜひチェックしておいてください。
www.yayoiken.com


来年も素晴らしいとり天に出会いたい

そんなわけで今年はとり天を食べまくっていた年でした。
反省点としては同じものを何度もヘビロテして食べるばかりで新しいとり天を楽しめる飲食店を発掘するのがおろそかになっていたことです。
とり天フィーバー勢としては新しいとり天のお店開拓を怠ることは由々しき事態だと重く受け止め
来年はより素晴らしいとり天が楽しめるお店を発掘していきます。
その布石として、最後に私が最近見つけたとり天好きはブクマ推奨なサイトを載せておきます。

とり天ワールド ☆☆☆ 鳥天、鶏天、トリ天、とりてん、toritenの専門サイト

(「TORITENで世界の平和を!」 素晴らしきとり天ガチ勢ですね)


※この記事は「今年食べた最高のご飯の写真Advend Calender」の9日目の記事としてお送りしました。
adventar.org

電車の中で一目惚れしたあの子(Webサイト)の秘密(ページソース)を知るためのテクニック(iPhoneでの表示方法)

良いデザインのあの子(Webサイト)やいつも気の利く情報をくれるあの子(Webサイト)のことをもっと知りたい…
そう思って意中の人の秘密(ページソース)を知りたいと思うことはよくある話だと思います(少なくとも私は)。
そしてそんな出会いは、いつも電車の中…
一目惚れしてしまった、君のことをもっと知りたい、だからページソースを見てみたい…
けどiPhoneでのソース表示どうすればいいの

この記事はそんな疑問にぶち当たった人のためのまとめです(決して恋愛ポエムや恋愛小説ではありません)

ブックマークレットを使って知る

Snoopy

snoopy.allmarkedup.com

ブックマークレット使った場合だとこれが有名どころかもしれませんね。
ページに書いてある手順に沿ってブクマに登録し、気になるサイトを開いた状態でSnoopyのブクマをタップすると表示してくれます。
ただし、どうも触ってみた感じだとhttpsページでは反応してくれない模様。。。

Appを使って知る

iSource

iSource Browser

iSource Browser

  • Gamu apps
  • ユーティリティ
  • 無料

HTMLソースはもちろん、コンソールやHTTPヘッダーの中身まで見ることができる無料のアプリ。
URL欄にキーワードを入れて検索することも可能です。シンプルで使いやすい。
サッと確認する程度ならこれくらいで十分ですね。

ScriptBrowserPlus

ScriptBrowserPlus

ScriptBrowserPlus

  • UNI-LABO Co.,Ltd.
  • ユーティリティ
  • 無料

無料でおすすめしたいのはこのアプリです。
ソース表示以外にも色々な機能がありアレコレ知りたい試したい人には便利(ソースコードテストもできるのは素晴らしい)
ただし残念ながらiOS11では動作対応していない模様。。。残念(;;)

View Source

View Source – HTML, JavaScript and CSS

View Source – HTML, JavaScript and CSS

  • Paul Hudson
  • ユーティリティ
  • ¥120

有料ですが個人的に一番使いやすいのがこれです。
Safariの共有メニューからこのアプリを呼び出せるのはめちゃくちゃ大きい。
DOM階層やページに含まれるアセットを見れるのも便利です。

最後に

謎のテンションで一気に調べて一気に検証して一気に書き上げた記事なので、誤りや間違いがあったり「こんな秘密兵器もあるんだぜ。。。」というのがあればコメント等頂けると幸いですm(_ _)m

【勉強会ノート】2017/11/18開催「HTML5感」での勉強会メモ

どうもです。最近めちゃくちゃ焼肉が食べたいです。

今回はLPI-JAPAN主催のイベント「HTML5感。」に参加してきました。

▷イベントページ
html5exam.jp

HTML5認定試験を行なっているLPIさんの勉強会なので気になって参加してみましたが、
行ってみた感想としてはWebフロント勉強し始めの人にとってもフロント技術駆使して色々やってみたい人にとっても盛りだくさん!な内容だったんじゃないかなと思います。
(あとマスコットキャラクターのセマンくんが可愛かった)

んで今回の勉強会で新しく学んだことの復習として
今回受けてきたセッションの概要と、そこで出てきたこれはチェックしておいた方がいい知識、技術を自分用のメモとしてまとめたいと思います。

HTML5~JavaScriptの応用例と学び方(山崎大助さん)

まずはじめの基調講演として山崎大助さんは「Webの領域ってそもそもどういうことをやっているのか」や「Web言語をどう学ぶか、学んだ言語をどう活かして行くか」をベースにしたWebフロント入門者から中級者以上向けのお話をしてくださいました。
山崎さんが主催しているジーズアカデミーでの学びの活かし方を事例に挙げながら、最近のアプリについての特徴等もお話してくださったので、個人的な感想として「Webアプリ、簡単なものでもいいから作ろう」とモチベが刺激されました。個人的に今日一番面白いと思った講演でした。
そんな山崎さんのお話の中で私がチェックしたことはこちら。

PHPはじめてのフレームワーク

はじめに山崎さんの著書等の紹介があったんですけど
その中でPHPフレームワーク入門として紹介していたのがこれです。
これ、なんで私が注目したかと言うと、Amazon Unlimitedに加入している人なら無料で読めるとのことです。
ちょうど今私PHPの基本を一通りやって次もうちょっと難しいのやりたいなと思っていたところだったので
これを機にAmazon Unlimitedに加入しようか。。。と心が大きく揺れた瞬間でした。。。

ブラウザ上で使えるJavascriptエディタ Ace

Ace - The High Performance Code Editor for the Web

プログラムの内容の中に「最近のオススメのエディターは?」と言う項目があったので
ちょうどDWやBrackets以外に何かいいエディタないかなあと思っていたので「あ、最近のエディタについての話かな?」と思ったら
「エディタを自分で作ろう!」と言うお話でした。
エンジニアの「いいものがないなら自分で改造してしまえ!」気質、やっぱり好き。(なので相変わらずエンジニア周りから離れられない)
んでご紹介にあったAceはブラウザ上で動く上に自分で好きなようにカスタマイズ可能な代物らしく、山崎さんはこれを使ってBootstrap用のエディタを自分で作った!とのことでした。(私の周りにいた方も興味があるらしく「すげえ・・・」と小声が聞こえてきたほどでした)
www.venezia-works.com


▷個人的参考URL
qiita.com

開発を促進させる諸々---FireBase/画像認識API

コンテンツファーストの時代だから、思いついたら誰よりも早く作るのが勝ちであり価値である、ということで
実際にアプリ制作でも使えるBassやWebAPIの紹介もありました。

◾️Firebase
firebase.google.com

Baasとして紹介があったのはFireBase。
私これ知らなかったんですけど、みた限りなんだか色々すごく便利そうですね。。。
始める前にさっと読むのに良さそうな記事があったので一緒にメモ。

▷個人的参考URL
qiita.com

◾️画像認識API
Microsoft
azure.microsoft.com

IBM
www.ibm.com

今回私が特に気になったのが、画像認識API
画像認識APIはアプリでも取り入れやすいものが多く、特徴として読み取ったデータをJSON化して書き出せると言うことなので俄然興味が湧きました。
各種APIの比較としてはこの記事が参考になるかなあと思ったのでメモしときます。

▷個人的参考URL
qiita.com

上記で紹介した数々のAPIにみられるように、今は色々なAPIが公開されています。
逆に言うと個人でもそれなりの機能を備えたものは作ろうと思えば作れるわけなので
これらをうまく取り入れたアイディア力が新しいWebアプリやサービス制作においてカギとなる、と言うことで
ジーズアカデミーでは必ず授業の中に何か一個小さいものでもWebアプリを作るようにしているとのこと。
プログラミング言語は基本的に一個理解すれば他の言語に応用して考え方を持って行くことが可能なので、
まず初心者は何か一つの言語の基本をしっかりやり、そこから他のものを広げて行く方が幅が広がるとのことでした。
自分の尖ったところをまず1つ磨く。最近色々目移りしがちな私の頭にガツンときた気がしました。。。

長期Webサービス受託開発こう困ったのでこうした(高津戸 壮さん)

先日参加したCSS Niteでも登壇されていたところをお見かけしたピクセルグリッドの高津戸さん。
今回の勉強会ではサービス受託開発でのご自身が経験したことやそこで使ったツール、サービス開発と捕手での心構えなどを交えたお話をしてくださいました。
この話は聞いていて一番「わかる。。。(涙目)」なポイントてんこ盛りでした(現に私がWebサービスの開発と保守両方経験している人間のため)
そんな中で私がチェックしたのはこちら。

構文チェック/ ツール

jshint.com

circleci.com

講演の中で紹介されていた構文チェックツールです。JSHintはjavascriptのフォーマット不整合や構文のおかしなところをチェックしてくれるツール、CircleUIはビルド、テストを自動で行い、設定すればそのレポート通知までしてくれるツールだそうです。
それぞれ入門に良さげな資料を探してみましたが、JSHintの場合他にも色々なJavascript構文ツールがあるようで、今回は比較記事で他にどういうものがあるのかを一緒に見れたらいいかなと思ったのでメモ。

▷個人的参考URL
www.tam-tam.co.jp

www.slideshare.net

プロジェクト管理:かんばん方式

カンバン: ソフトウェア開発の変革

カンバン: ソフトウェア開発の変革

この考え方私は知らなかったんですが、Trelloを個人で使っているのでそいつの具体的な活用方法としてこの考え方を導入すると相性がいいのかなと思いました。
高津戸さんのプロジェクトではクライアントから来た要件を整理しながらかつ作業者がすぐに着手しやすいように整理するために「要望、要件定義、着手可能、実装済」とボードを区切ってタスク整理をしていたそうです。(そもそもかんばん方式の使い方がこのセオリーとのこと)

▷個人的参考URL
ソフト開発に「かんばん方式」を導入すべき理由とスクラムとの違い - WPJ

AR for HTML5(須山 陽一さん)

ブラウザ上で今後ARを実装していくにあたってのサンプルを示してくださったのが須山さん。ちょうど私が興味を持っていた分野だったのでお話で出て来た技術をチェック。

ARフレームワーク---AR.js

github.com
ARを手軽に実装するためのライブラリとして紹介されたのがこのAR.jsです。セキュリティ上の観点からHTTPS通信でなければ動いてくれない点に注意です。
入門記事等探してみましたが、結構色々ありそうです。

▷個人的参考URL
getar.jp

Web上で軽快に動作するオープンソースのARツール「AR.js」とは何か? | Tech2GO

VR用フレームワーク--A-FRAME

aframe.io

そしてVRフレームワークの紹介も。Mozillaが開発したVRフレームワークのA-FRAMEがお手軽でお勧めとのことで今回のデモではAR.jsと組み合わせた活用例を披露してくれました。最近iOSSafariでもAR.jsを使った表現ができるようにになったので、今後この組み合わせでの開発が増えるのではとのことでした。

▷個人的参考URL
qiita.com

www.webprofessional.jp

qiita.com

AR用ライブラリ--ARToolKit / ArUco

Open Source Augmented Reality SDK | ARToolKit.org

ArUco: a minimal library for Augmented Reality applications based on OpenCV | Aplicaciones de la Visión Artificial

AR用のライブラリとして紹介されていたのがこの二つ。ARToolKitC言語、ArUcoはC++ベースのライブラリだそうです。ブラウザ上で利用するにあたっては、ブラウザで動かせるようにコンパイラを別途かます必要があるとのことです。まずはAR.jsを触れてみて、そのあとこのライブラリにチャレンジ、という感じかなと思いました。

▷個人的参考URL
「攻殻機動隊」「電脳コイル」の世界を実現! - ARToolKitを使った拡張現実感プログラミング - 工学ナビ

qiita.com

tips.hecomi.com

CreateJSでつくるインタラクティブなコンテンツ(野中 文雄さん)

WebでのARの話を聞いたのでこれも聞いておこうと思い野中さんの講演も聞いて来ました。

CreateJS

createjs.com

Flashライクなことを今後行いたいのであればHTML5Canvas機能とCreateJSを組み合わせれば大体のことは楽しくできるということ。すごい。
野中さんが過去にgihyo.jpで公開した連載記事が導入編として挙げられていましたので、これと併用して他のCreateJS入門記事を読むと学習しやすそうな印象です。

▷個人的参考URL
gihyo.jp

CreateJS入門サイト - ICS MEDIA

まとめ

そんなわけで内容の濃いセッションづくしでお腹いっぱいになれました!APIを利用したWebアプリ開発は実際に作ってみたいなと考えていたことのヒントになったのでちょとチャレンジしてみたいなと思います。あとはCreateJS楽しそう。
そして今回ラッキーなことに大抽選大会でセマンくんの携帯ストラップ当たりました。やったあ。

【勉強会ノート】マーケティングデザイン論勉強会に行って学んだ事と、自分なりに学び考えた事をまとめてみる

f:id:mio_U_M:20171112183110j:plain

どうもです。めちゃくちゃ久しぶりにブログ更新します。

先月のことになりますが、10月29日に都内にて行われたデザイン系勉強会「初心者歓迎!マーケティング+デザインで「伝わる伝える」考え方を知ろう!」に行ってきました。

▽イベントページ
https://atnd.org/events/91662?kme=clicked%2Bevent%2Bremind%2Bmail_url

もともと大学時代にポスターデザイン史やウェブ広告という、いわゆる「商業美術」を勉強、研究した結果「ただ美しいだけじゃなくて、ちゃんと機能性や商業価値を考慮したデザインをもっと学んだり試してみたりしたいなあ」と思っていた私にとって「この勉強会はタイトルからしてまさに求めていたものだ!」と思い即決で参加したこの勉強会。講師はCSS Niteでもご登壇経験のあるデザイナー/ディレクターのたじまちはるさん(@DesignHumore)ということで、現場でご活躍されているデザイナーさんからみたマーケティングとデザインの掛け合わせとは一体どういったものだろう?とわくわくしながら参加しました。

結論から言うと
「ほんとに参加してよかった!」
「今日学んだことをもとに、もっとマーケティングやデザインを追求しよう!」
と心の底から思いました。
思わず個人的にマーケティングについて勉強し始めてみたほどです。

なので今回は、たじまさんの勉強会で学んだこと+自分で個人的に学んだこと、感じたことを(放っておくとすぐに忘れるトリ頭な)自分用のまとめとして残したいと思います。

マーケティングとデザインをつなぐキーワード
「See Tnink Wonder」

今回のたじまさんの講義でのキーワードはこれでした。

「See Tnink Wonder」
(よく見て よく考え 魔法を起こす!)

マーケティングと出会いを繋げる思考の可視化」のプロセス、というサブタイトルで掲げられたキーワード。最初にこれだけ聞くと「どういうことだ?」となりますが、結論から先に言うと次のような意味でした。

  • Seeは商品を売り出そうとしている環境や相手を知ること
  • Thinkはその商品をどういった方向性、内容で売り出すかを考えるということ
  • Wonderは売りたい商品・サービス、その商品の販売戦略のために何をデザインするか、どういった技術で落とし込むかということ

マーケティングとデザインが両立して生み出された商品やサービスはこの3つのプロセスがちゃんと存在している、というのが全体を通してたじまさんが伝えたかったことだと私は解釈しました。

マーケティングって、そもそも何?

まず初めにそもそもマーケティングとは何か?について。たじまさんはドラッガーコトラーの名言を用いつつ紹介してくださいましたが、まとめるとこの一言に集約するとのことでした。

「もの・サービスの価値を理解したうえで、
 必要とする人へ選んでもらうように届ける」

世の中は需要と供給であふれています。でもただ単に売りたい人が売りたいものを売るだけで必要とする人がやってくるわけではないです。では必要とする人に自分の商品やサービスが届くためにはどうしたらいいか?そのために大切なプロセスが「See Tnink Wonder」の3ステップなのです。

Seeは事実以上に相手の世界を理解すること

必要とする人に自分の商品やサービスが届くためにはどうしたらいいか?その目的を達成するためにまず取り掛かるべきことは「事実以上に相手の世界を理解する」ということです。
ここでいう「相手の世界」とは何かというと…

・商品の競合他社
・顧客の特色、行動心理
・顧客の置かれている状況
・クライアントの商品を売ろうとしている場所

などなどです。

マーケティングの話を持ち出すとき、競合他社や販売される場所(市場)を調査することは当たり前のように話の引き合いに出てきます。また、最近マーケティングの用語としてよく聞くペルソナやカスタマージャーニーなどは、顧客の行動や心理を理解するための考え方や手法の一つとして提示されていますよね。「この人は必ずこういう商品・サービスが欲しいと思うはずだ!」という推測をもって作って見ても、いざユーザーテストをやってみるとこっちが思っている以上にあれこのユーザーはこの商品・サービスを必要としていない…?と期待外れになることがあります。そういった市場や顧客を行動や動向も含めて具体的に検証や調査を行い、商品周りについてのひとつ一つの理解を積み重ねる行為。それがSeeの部分ということです。

Thinkは商品やサービスを理解し戦略を練ること

売りたいものはある!どういう市場でどういう顧客がいるかも知った!という段階に来た時に、次に取り掛かるのは「商品をその市場や顧客に対してどう売って行くかを考える」ということです。
具体的にどういうことを考えるかというと…

・ 広告媒体は?
・どういうブランディングにする?
・販売活動はどうやってやる?
・ターゲットユーザーに届くようにするには?

などなどです。

ここで重要なのは「そもそもこの商品やサービスってどんなものか」を理解する、ということです。競合他社や市場の流れ、ユーザーなどについての情報をSeeのプロセスで洗い出したのなら、「その中でこの商品の特別なポイントは何か?」「何をコンセプトとしてこの商品を作ったのか?」を出発点として商品戦略を展開していくのがThinkのプロセスなのです。逆に言えば、この「そもそもこの商品やサービスってどんなものか」がなければ、商品の方向性や戦略がブレてしまいます。また、後述する実例のプロセスでも「なぜそのデザインになったか」の前に必ず「そもそもこの商品やサービスってどんなもの?」の理解が前提としてあることが見受けられます。SeeとThinkの過程で得た情報や考え出した戦略がWonderのタネとなるのです。

Wonderは売りたい商品・サービス、その戦略を効果的に魅せること

そしてここで製品を具体的にどういう形にするか、というのがWonderのステップです。
売りたいものと、売りたいものの戦略を実現するために必要なのがデザインの力。ここで初めて具体的なヴィジュアルの話をするから、デザイナーの出番やっと登場だぜ!というケースが多いかもしれません。ですが、マーケティングデザイン論の文脈で言えば、SeeやThinkで揃った情報と戦略を繋げて最終的な成果物に落とし込むというプロセスなので、本来ならばSeeやThinkの過程からデザイナーが加わっていることが望ましいのでしょう。商品のパッケージも宣伝媒体も、効果的なものを打ち出すにはマーケティングやデザインと繋げて考えると成功率が上がる。それならば、上の方の過程から見通せている状態で制作に取りかかることが一番ベスト!ということを私自身は感じました。
(実際にデザイナーとして現場に関わった経験がないので、ここら辺の話はたじまさんのお話や自分の勉強を通して感じたことです。デザイナーとしてそういう現場に関わってみたい…!)

Wikipedia先生を見てみると構造がわかりやすいよ

実際にこのマーケティングとデザインがつながっている構造をみるにはWikiをみると良いですよ〜ということでググってみると、なるほど確かにページ右端のところにある概要説明バーに3つの構造が書いてあります。

マーケティング - Wikipedia

◆要約するとこんな感じ
・主要概念 → 商品を売り出そうとしている環境や相手を知る(See)
・宣伝内容 → 商品をどういった方向性、内容で売り出すかを考える(Think)
・宣伝媒体 → 売りたい商品・サービス、その商品の販売戦略のためにデザイン、技術をどう用いるか考える(Wonder)

こうしてみると、マーケティングの目的を達成するには、「市場調査や商品戦略はしっかりやってるけど、その良さを伝えるデザインはまあよしなに」なことにしても意味がないし、「このメディア媒体や技術は流行りだから市場調査とか戦略とかろくにしなくても売れる!」という考えも通用しないということが見えてきます。

実例で見る!「See Tnink Wonder」

売れる商品、よくできているサービスはちゃんとSee Think Wonderの3ステップがある。実際にたじまさんが紹介してくれた例から考えてみます。

実例1:明治 おいしい牛乳

See
・世の中の牛乳に対するイメージとは?
雪印の食中毒問題で、健康的でないイメージが強くなっていた…

・人々が牛乳の嫌いな原因とは?
→牛乳の臭みが嫌われる原因。
→成分テストをした結果、牛乳が酸化することで臭みが発生することが発覚
→牛乳から酸素を抜くことで、新鮮で臭くない牛乳に!

Think
・ネーミングはどうする?
→流行りのネーミングスタイルよりも、こだわったことをそのままストレートに表す!

・家庭で選ばれる牛乳のパッケージの色は?
→消費者テストをした結果、スーパーなどで目を引く赤色より、
 家庭の朝食風景に馴染む青の方が好まれることがわかった!

・スーパーや店頭で選ばれる場合何を意識したら目につきやすい?
→商品陳列におけるゴールデンゾーン(=自然と目に入りやすい位置。人の少し下向き気味の目線位置)を意識すると届きやすい

Wonder
・おいしさを表現するためのパッケージの絵柄は?
→今までの牛乳パッケージにあるような牧場や牛のイラストを使用せずに、
 グラスに注がれた牛乳の写真を使って、美味しさと新鮮さをアピール

・ゴールデンゾーンに商品を配置するにあたって各部位をどう見せるか
→注ぎ口は商品名が目立つような配置に、
 本体部分は商品名と牛乳の写真が目立つような縦型レイアウト、
 商品下部は、陳列棚の支えが被さることを考慮して、
 商品説明や商品名が入り込んでしまわないように調整

・おいしい牛乳が一つのブランドとして長く愛されるためには
→パッケージ上部にアーチ状の装飾を拵え、
 そのアーチ状の装飾を他の場所でも展開し、
「青色アーチ=おいしい牛乳」を想起させるようにした!
(ブランド関連の招待状のデザインにアーチ状の飾りを取り入れる、など)

今や牛乳の主要ブランドの一つとなっている明治おいしい牛乳。15年前までは牛乳といえば雪印、というイメージが強かった時代があったことをご存知ですか?雪印は不正と食中毒問題で一気に人気が暴落し、それに変わって人気ブランドとなった明治おいしい牛乳。人気になったわけは、徹底して人に向き合い、普通に選ばれる牛乳を目指したこと。このパッケージを担当した佐藤卓さんは、売場における子供や高齢者の目線まで考えたうえでフォントの位置もミリ単位で調整したそうです。それらも全て、人々に普遍的な牛乳として選ばれるための工夫。デザイナーの仕事の真髄を感じられる一例です。

実例2:三菱地所グループカード販促キャンペーン

See
・そもそも依頼主のクレジットカードはどういうものなのか?
→クライアントのサイトをみて、より詳細な情報を収集

・カードに対するお客様の評価は?
→口コミ(知恵袋やSNSなど)を調査

・他社と比較してポイント交換レートはどんな感じ?
→比較評価やポイント交換比較サイトなども調査

・実際にお店の人が案内している現場はどんな感じ?
→実際に店舗に行ったり、案内の現場をみたり、リーフレットを実際に取ったり…

Think
・他と比べて魅力的に見せるためには?
→良さを一言でまとめることで、訴求力を増すようにする!
→様々なサービスや特典を満喫できることが伝わるフレーズに集約

・ただのお客様へのパンフレットとしての役割以上にするには?
→販促現場で、店員さんがパンフレットを利用して説明を行なっていたことから、
 お客様に取ってわかりやすい機能はもちろん、
 店員さんに取っても説明しやすい機能も備えたものとして制作する!

Wonder
・良さを伝えるためにどうデザインに落とし込む?
→どういう風に使えるか、実際のシュミレーションや使用例を示す
(ポイント交換シュミレーション例を示す、会員の特典の具体例を示す、などなど)
 →実際にお客さんに伝わるかどうかを確認!

・お客様にとっても店員さんにとっても最適なリーフレットとは?
→お客様視点からの疑問や質問などを集めたQ&A集を記載
 =店員にとってはお客様に説明しやすくかつ魅力を伝えるためのツールとなる!
→カードと同じ形のリーフレットにすることで、
 何のパンフレットかわかりやすくかつ持ち運びしやすくなる


これは実際にたじまさんが関わったプロジェクトのお話です。三菱池所グループカード(クレジットカード)の契約数を伸ばすための販促手段を刷新してほしいという依頼で、最終的に反則パンフレットのデザインを刷新した例です。最初企画概要がコピー用紙一枚でポイント数とキャンペーン内容のみしか書いていなかったという情報の少ない依頼の中、「見た目は仕組みが作る」という考えの元、サービス内容、カードの販促現場の実態、評判の調査を積み重ね、最終的に「お客様にわかりやすいパンフレット」としての機能だけでなく「カードを販促する店員が実際にお客様に説明する際に助けとなるパンフレット」という二つの機能を備えたものに昇華させたそうです。実際に講義の中でそのパンフレットを見せてもらいましたが、パッとみただけでわかりやすいのはもちろん、店員さんの説明の助けになる部分は裏面に記載して表裏で役割を分けるという工夫もこしらえていました。よく考えられているデザインを見ると発見が多いので勉強になる上にみていて楽しいです…

たじまさんのお話から私なりに3つに分類してみましたが、「あれこれってThinkじゃなくてWonderなのでは?」とか「SeeというかThinkなのでは?」というものもあるかもしれません。というのも、実際のところうまくこの3つのステップがつながっているものほど厳密に分けるのが難しいというのがあります。最初から市場調査の結果や戦略やデザインが一本軸でつながっている前提のプロジェクトは、そもそもデザインにもちゃんとした意図が組み込まれているものが仕上がっているし、戦略を練る段階でパッケージや広告などデザインの領域に入っているということなのでしょう。

個人的に思ったことまとめ

ここからはマーケティングデザイン論の導入部分を学んでみて個人的に感じたことを書き記して置こうと思います。基本的に私の個人的な感想なので「マーケティング以外の話は興味ないんで!」って方はここら辺からページ離脱してください。

マーケティングって「おもてなし」!

この講義を聞いて一番感じたことです。
マーケティングとデザインを掛け合わせた実例を聴きながら、成功するマーケティングの条件の根底にはお客様に対する「おもてなし」の心があるんだと感じました。
そしてデザインにそういったマーケティング的考え方を持ち込むと言うことは、クライアントがターゲットとしているお客様に対してのおもてなしの心はもちろん、クライアントに対してもおもてなしをしているということになります。

マーケティング + デザイン」な考え方のデザイナーは
物を売りたい企業と、物を欲しいと思うお客様に対して、とっても「おもてなし」をしている!

この姿勢、私はとても共感しました…
もともと私は、友達の誕生日プレゼント考えたり選んだりするの好きな人間で、「せっかく渡すなら、その人が本当に欲しいものをプレゼントしたい!」と考えているので、誕生日を迎えようとしている友達が何を必要としているのか注意して会話をしたり、その子の持ち物や行動をみながら「こういうプレゼントなら今必要としているのではないかな?」と推測して、友達にプレゼントを渡すということをしているんです。その結果「これ好き!」「ちょうど新しいのが欲しいと思ってた!」と喜んでもらえてプレゼントを使ってもらう様子を見たときの達成感や喜びは、半端ないことこの上なし。たじまさんの言葉を借りると、「その人のことをよく見て、その人のことをよく考えて、結果その人にWonderな体験をしてもらう」ということがしたかったんでしょうね。なので私にはとても合うデザイン思考だなと感じました。

こういうデザインをやりたいんだ!と気づかせてくれた

個人的な話をすると、私はちょうど転職活動中の身でして、この勉強会に参加する前、ちょっと自信無くして落ち込みかけていた状態だったのです。
というのも、転職活動と並行して色々な交流会に参加しており、その中で業界のお話や実際にデザイナーとして活動している方とお話しした結果「スキルや経験が全然追いついてないのにデザイナーとして転身しようとしている私は、一体何を信念にして活動しようとしているんだ?」とぐるぐるぐるぐるドツボにハマってたのです。
ですが、この講義を聞いたことで「そうだ、私はこういうことをやってみたいのか。そのためだったらスキルやら経験やら何でもキャッチアップして前進しよう!!!」と元気をもらえたのです。結局のところ「好きすきやってみたい!」という気持ちがあれば経験とかスキルとかは気持ちの強さで何とかできると思い出したんです。
元々私は文系出身でSEをやっているんですけど、今まで何とかやって来れたのって「設計考えるのって面白い要素あるな」「プログラミングって学べば学ぶほどもっと色々とやってみたくなるな」という「すきすきやってみたい!」精神があったからなんです。なので何かをはじめる際に必要なものってエンジンとなる自分の軸(「すきすきやってみたい!」精神)だけなんです。
ちょうど私は様々な情報に圧倒されてしまって、デザイナーを目指すに当たってそこの自分の軸を見失っていました。スピードがでない車のように自信消失低速モードだった私を、「やってやる!」な爆速モードに戻してくれたたじまさんの今回の講義にはとても感謝の気持ちでいっぱいです。


私の与太話が入ったせいでだいぶん記事長くなってしまいましたが。。。
とても刺激になった講義でしたので、備忘録として執筆しました。
もっとこの分野について知りたいことも色々あるので、さらに個人的に勉強しつつ、私自身もこういうことをやるデザイナーになれるように行動していこうと思います。

最後に、今回の講義はもちろん、記事執筆にあたって公開の許可や協力をいただいたたじまちはるさんには心の底から感謝です!
マーケティングとデザインをつなぐことの面白さ、教えていただきほんとうにありがとうございました!

【Dreamweaver】スニペットが一時期流行ったポストペットの新しいサービスか何かと勘違いするくらいわかっていない人向けのスニペット解説

「そんなやついるわけねえだろ?!?!」と思ったあなた、

今まさに目の前にそんなこと考えた人間がいますので目を疑わないでください。

Webデザイン系の記事を読んでいて出会った言葉なんですけど

「あれかな?CSSアニメーションとかPHPとか駆使してメッセージ送るイマドキなポストペット????」

とかちんぷんかんぷんが足生えて歩いているようなこと出会った当初考えてた自分を

我ながらぶん殴りたいくらいです。今まさに。

 

スニペットソースコードのあんちょこメモ!

さてさて本題。

コーディングを行っているときって、結構自分がよく使うお決まりの定型文だったり、よく使うライブラリだったりをまた使いたいときに

「あれ…前ってどう書いたっけ…」と前に書いたソースを探しては時間を浪費し、やっと見つかったときには結構な時間かかってたアアアアってこと、あるんじゃないかと思います。

(実際SEやってると死ぬほどあります(白目))

 

そんなときにあらかじめよく使うコードや定型文を保存しておいて、いざというときにすぐに取り出せるようにする、それがスニペットなのです。

(仕事でソースいじってるくせに知らなかったとは何事かと思うでしょうけどそれくらいでもSEやってますほんますいません)

 

Dreamweaverスニペットを登録してみる

言葉ばかりの説明ではわかりにくいのでとにかく実践あるのみ。

というわけで普段よくお世話になっているDreamweaverCS6でスニペットを登録してみました。

 

①「ウィンドウ」>「スニペット」(ショートカット:Shift+F9)を選択

f:id:mio_U_M:20161027235658j:plain

 

デフォルト設定のままのワークスペースであれば左下の方にスニペットウィンドウが表示されます。

 

スニペットウィンドウから「新規スニペット」を選択

f:id:mio_U_M:20161027235706j:plain

 

※これを選択する際、あらかじめスニペット一覧のどの階層に設定しておきたいか選んでおくと楽です

 

③「スニペット」ダイアログが開いたら、登録したいスニペットの情報を記入

f:id:mio_U_M:20161027235732j:plain

 

④「OK」をクリックすると、設定したスニペットが登録されます

f:id:mio_U_M:20170227220320j:plain

 

ね、簡単でしょ( ͡° ͜ʖ ͡°)

あとは必要な時にスニペットを呼び出せば良いので

CSSなどで長〜い定型文(clearfix用のCSSなどを私は登録してます)などをいちいち打ち込む手間が省けます。

 

Dreamweaverで登録したスニペットにショートカットを割り当てる

せっかく登録したスニペット

でもいちいちクリックでウィンドウカチカチして呼び出すよりも

ショートカットに覚え込ませてサクッと取り出すのが一番の作業短縮ですよね。

というわけで、さっき登録したスニペットをショートカットキーに割り当てます。

 

①編集>キーボードショートカットを選択する

f:id:mio_U_M:20161027235730j:plain

 

②キーボードショートカットダイアログを開いたら、コマンドから「スニペット」を選択し、ショートカットを割り当てたいスニペットを選択、+ボタンをクリックする

f:id:mio_U_M:20161027235733j:plain

f:id:mio_U_M:20170227220911p:plain

 

 ※注意!

上の状態でスニペットにキーを割り当てようとすると以下のようなダイアログが現れます。

これは何かと言うと、現在のアセットが「Dreamweaver Default」を選択して変えようとしていることに対する警告です。

f:id:mio_U_M:20170227220943j:plain

Dreamweaver Default」のアセットは変更することができないので、キーボードショートカットを割り当てる際は自分のオリジナルアセットとして割り当てる必要があるのです。

こんな時は焦らずに、上記ダイアログのOKを押してオリジナルアセットの名前を決定し、新しいアセットとして登録してしまいましょう。

f:id:mio_U_M:20170227220952j:plain

 そうすると、もともと選択していた「Dreamweaver Default」をベースとして新しいアセットが保存されます。この状態で+ボタンをクリックしましょう。

f:id:mio_U_M:20170227221441j:plain

 

④割り当てたいキーを入力する

例えばCtrl +/ に登録したい場合は、カーソルがフォーカス当たってるのを確認してCtrlと/を同時押しすれば良いです。読み取ってくれます。

f:id:mio_U_M:20170227221454j:plain

 内容に問題がなければOKを押して、登録完了です。

f:id:mio_U_M:20161028000606j:plain

うん、eclipseJavaいじってる時と感覚が同じになった。やったね。 

 

そんな感じで、スニペットはゴリゴリコードを書くにつれて不可欠となってくるので

「これを何回も書くのはどう考えても時間の無駄無駄無駄アアア」と思ったものはポイポイ登録して

「これを何回もスニペットから呼び出すのはどう考えても体力の無駄無駄無駄アアア」と思ったものはショートカットも一緒にしちゃえば良いのです。

CSSJavascriptとか書く時に重宝しそうですね。

 

[今回お世話になったサイト]

参考にさせてもらいました。ありがとうございます!

webnaut.jp

delaymania.com

【自分用メモ】Photoshopの「知らなかったこんな技!」をまとめるための記事【随時更新】

昨年末から本腰入れてWebデザインの勉強を始めて分かったことは

「私Photoshop使いこなせてないわ(泣)」の一言に尽きました。

そんなわけで、この記事は私が「知らなかった!」と思ったPhotoshopの技について備忘録的に残していくために置いておきます。

なので知らないことがまた出てきたらこの記事更新します。

 

切り抜きツール / 指定した縦横のサイズで画像を切り抜く

実を言うと切抜きツールの存在自体知らなかったんですが(オイ)

ハンドルを動かしてメモリ見ながら欲しいサイズを取ってくる、と言う風に最初はやっていたんですが

優秀なPhotoshopなんだから値を指定してとってくることができるはず!と思って調べてみたらやっぱりできました。

f:id:mio_U_M:20170222011740j:plain

切抜きツール(ショートカットキー:C)を選択すると、数値を入力できる二つのボックスが現れます。例えばここに「500px × 200px」指定で切り取りをやってみます。

f:id:mio_U_M:20170222011907j:plain

f:id:mio_U_M:20170222011921j:plain

数値を入力した段階でプレビューが表示されるので、問題なければそのままEnterキーで確定します。簡単でしたね。

ちなみに、上記の画像では単位も一緒に入れて指定しましたが、

これが単位指定無しで行うと、比率で切り取ると認識してくれます。

f:id:mio_U_M:20170222012012j:plain

 

※補足:切り抜くときに選択外の領域を残したいとき

上記の手順では、この切抜き操作を行うと領域外の箇所はばっすりなくなってしまう操作です。

そうではなく、領域外は残したまま指定の切り取りを行いたい場合は単純に

「切り抜いたピクセルを削除」のチェックを外してやればよいのです。

f:id:mio_U_M:20170222012236j:plain

この状態で切り取りを行った後、移動ツールで画像を動かしてみると

ちゃんと領域外の画像も残っていることが確認できます。

f:id:mio_U_M:20170222012320j:plain

f:id:mio_U_M:20170222012412j:plain