2018」の14日目の記事です。)です!リードエンジニアのお兄さんに「森さん、寿司食いたくないですか?」と聞かれ「もちろん、食べたいです。タイトル通りデザイナーの私が初めてプロダクトのコードをコミットしてみたお話をします。してコードを書くことになったの?私の普段の業務はアプリのUIデザインなのですが、ときどきWebのクリエイティブ作成にも関わることがあり、いつもクリエイティブを作ったのちに「お願いします!」とこのようにエンジニアの方にお渡ししています。「こんな綺麗な流れってあるんだ・・・」と感心しつつ、探り探りでやっていくことに・・・まず、作成したクリエイティブをステージングへ、そして本番へアップロードしなければいけません。heyと話しかける画像アップローダーくんからお返事がきたので快くyesを選択すると・・・ステージングにアップロードできちゃいました!こんな簡単に・・?と疑っていると、今度はタコとネコのハーフからお返事が来たので快くyesを選択。すると・・・できました!差し換え用のクリエイティブを本番にアップロードすることができました。すごい!と、ここまでは画像アップローダーくんに助けられていましたが、ここからは一人の戦いです。OSの出し分け今回私が作成したクリエイティブは、アプリへのダウンロード導線バナーです。OS別にバナーを作成しているので、iOSユーザーには左のiPhone端末バナー、そしてAndroidユーザーには右のAndroidの端末バナーを出したいのです。ところが、コードの書き方が全くわかりません。出し分けで検索してみると、「JavaScriptで簡単にUA判定する方法」に関する記事が出てきました。UA判定というものがあって、これを使えばiOSかどうかがわかるらしいので、UAを利用してiOSを判定するコードを探しました。0こちらを利用して、実際に画像を出し分けるコードを書いてみます。imgタグはわかっていたので、このソースを切り替える方法を調べていくと「getElementByIdを使ってソースを書き換えると良い」とあったのでとにかく書いてみました。"//static.thebase.in/img/u/U1MK212HY/FERP402M8.png"}</script>これでpushしてみると・・・ちゃんと動いてます!出し分け成功!なんとかこれをプルリクエストまで持っていくことができました!なんでしょうか、この達成感は・・!!プルリクエストー!!と舞い上がっているところに間髪入れずリードエンジニア兄さんからのつぶやき↑が聞こえてきました。コードを少し書くだけでも一苦労だったので正直勘弁してほしいなと思ってしまいましたが、どうせなら!とquerySelectorに書き換えることに。これがイマドキなんですね(getElementByIdの方が響きはイカしてると思いますが)こうして無事リードエンジニアの兄貴からOKが出ました!リリースです🎉おしまいここまでの流れを簡単に書いてきましたが、実際はコマンド一つを実行するにも調べながら、質問しながら、とかなり苦労しました。それでもターミナルがガガガーっと動くのは楽しいし、自分の制作物をエンジニアさんにお任せするのではなく、最後まで責任持って本番環境に届けることに気持ちの良さと達成感を覚えました!私のようにこれからは一通り自分でやってみるぞ!!というデザイナーが増えると嬉しいです。)の開発チームによるブログです。Groupの大木です。Developerをしている東口です。Groupのマネージャーをしている山田です。12/1から始まっ...Archiveスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。