KAI-YOU Lab http://lab.kai-you.net 2017-12-06T00:00:00+09:00 KAI-YOU inc. 制作部 KAI-YOU.netではこの度emojiに対応しました http://lab.kai-you.net/2017/12/06/emoji/ 2017-12-06T00:00:00+09:00 2017-12-06T19:56:43+09:00 キャベツこうべ <img src="/blog/2017/12/emoji/images/eyecatch.png" alt="KAI-YOU.netではこの度emojiに対応しました"<p>みなさまお疲れ様です！<br /> 少しご無沙汰になってしまいましたが、カイユウエンジニアの神戸です。</p> <p>少し前の話なのですが、KAI-YOU.netで使用しているサーバーを変更してサーバー移転をしました!!<br /> と、同時についでにですが、これまで対応できていなかった「絵文字」に対応しました！</p> <p><img alt="絵文字のBefore、After" src="/blog/2017/12/emoji/images/b_and_a.png" /><br /> <a href="http://kai-you.net/article/47776">コロッケのまんま、茸のまんま……本当にまんまなのか判定してみた！</a>より</p> <h1 id="section">なんで対応したのか</h1> <p>絵文字は1990年代に携帯電話の普及に合わせて日本で誕生し、現在では国際標準規格として世界中のパソコンや携帯電話で使用されています。</p> <p>「嬉し泣きを表す絵文字（Face with Tears of Joy）が、オックスフォード英語辞典の「2015年を代表する英語」として選出されるなど、SNSが発達した現代を象徴するコミュニケーションツールとして親しまれている。」<br /> <a href="http://kai-you.net/article/26720">絵文字を紐解く洋書『The Story of Emoji』 生みの親インタビューも</a> より</p> <p>……というように、今後の「テキストだけではない文章表現」「今っぽさ！」などの部分もありますが、実際には、<strong>記事の編集中起こりうる事故に対応する</strong>という大きな理由がありました。</p> <h1 id="section-1">編集時におこっていた悲劇</h1> <p>サーバー移転前までのことを説明いたしますと、カイユウではUTF-8という文字コードを使用していました。</p> <p>文字コードに関する細かい説明は省きますが、「特に理由がないならUTF−8でいいでしょ！」という感じで、4年ほどKAI-YOU.netを運営してました。</p> <p>そして記事を作成しているタイミングで時々起こる問題が、</p> <p><span style="font-size: x-large; font-weight: bold;">「記事が途中からぶった切られて保存されてる」</span></p> <p>というのもUTF−8の場合、比較的新しい4byteのUTF-8文字列（今回の絵文字以外にも他の国の言語や、非常用漢字などが当てはまります。）は保存できず、その4byte文字を含めそれ以降の文字が消えてしまう。という風になっているのです！</p> <p>しかもエラーもなくただバッサリと……<br /> <span style="font-size: small;">（sql_mode = STRICT_TRANS_TABLES だとエラーがでます！　また、MySQL5.6以上はデフォルトでsql_mode= STRICT_TRANS_TABLESになってます。　ちなみにsql_modeはSELECT @@GLOBAL.sql_mode;のコマンドで確認できます。）</span></p> <p>というわけで絵文字も扱えるようになるし！UTF−8mb4への変換を行ったのでした。</p> <h2 id="db">既存のDBの文字コード確認方法</h2> <pre class="highlight plaintext"><code># 使用可能な文字コードの確認 show character set; # 現状のデータベースの設定確認 SHOW VARIABLES LIKE "chara%"; # 各テーブルの文字コード確認 show table status from `db_name`; </code></pre> <h2 id="section-2">文字コードの変換方法</h2> <p>既存のデータベースの変換を行っていきましょう。</p> <pre class="highlight plaintext"><code># データベースの文字コード変更 alter database `db_name` character set utf8mb4; # 各テーブルの文字コード変更 alter table `table_name` convert to character set utf8mb4; </code></pre> <p>また今後のデータベースで作成されるテーブルをmb4にしておきましょう。<br /> my.cnfあたりの設定を編集します。</p> <pre class="highlight plaintext"><code>[client] - default-character-set = utf8 + default-character-set = utf8mb4 [mysqld] - character-set-server = utf8 + character-set-server = utf8mb4 </code></pre> <p>そして、MySQLを再起動します。</p> <p>また、弊社でフレームワークとして使っているcakephp側の接続情報（database.php）にも文字コードを指定するところがあるのでそちらも編集しておきます。</p> <pre class="highlight plaintext"><code># encodingをutf8からutf8mb4に変更する public $default = array( 'datasource’ =&gt; 'Database/Mysql’, 'persistent’ =&gt; false, 'host’ =&gt; 'hostname’, 'login’ =&gt; 'loginname’, 'password’ =&gt; 'password’, 'database’ =&gt; 'databasename’, 'prefix’ =&gt; '’, 'encoding’ =&gt; 'utf8mb4’, ); </code></pre> <p>この設定をしていないと、保存での悲劇はおこらなくなりますが、？で表示されてしまいます。</p> <p>という感じで、KAI-YOU.net内で絵文字を使えるようになりました！</p> <p>動いているサーバーで上記のことを一気に行うのは正直怖かったのですが、サーバー移行というナイスタイミングがあったので実施できました！！</p> <p>記事によりエモさを取り入れ、表現豊かな記事をかけるようにしていきたいと思います！<br /> 感情をどうにかするぞ！</p> <h2 id="section-3">エンジニア・デザイナー募集しております。</h2> <p><img alt="採用募集中です。" src="/blog/2017/12/emoji/images/recruit.jpg" /></p> <p>KAI-YOUは職種を越えて何かやりたいことを積極的に勉強したり、また自由に取り入れたりしてお仕事ができる会社です。</p> <p>なにか、これをやってみたい！というチャレンジしたいエンジニアさん、デザイナーさんを募集しています。</p> <p>一緒に働いてみませんか？</p> <p><a href="http://kai-you.co.jp/recruit/">RECRUIT | 株式会社カイユウ - KAI-YOU inc.</a></p> <p>以上カイユウ開発部エンジニア、キャベツこうべでした。</p> フリーソフト「blender」でサクッと作る、おしゃれグラフィック http://lab.kai-you.net/2017/06/13/blender-adv/ 2017-06-13T00:00:00+09:00 2017-12-04T19:53:54+09:00 bpm <img src="/blog/2017/06/blender-adv/images/eyecatch.jpg" alt="フリーソフト「blender」でサクッと作る、おしゃれグラフィック"<p>どうも開発部のbpmです！今回はフリーの3DCGソフトの「blender」で、オシャレなグラフィックをサクッと作る方法をご紹介できればと思います。<br /> ちなみに、前に「blender」の記事を書いてからだいぶ経ちまして、3Dはメインじゃないんですが何度か仕事をいただいて、要領を得られた気がしてます。<br /> <a href="http://lab.kai-you.net/2015/10/26/blender-begin">完全フリーの3DCGソフト「blender」をはじめよう Vol.01</a></p> <p>ブログとかにちょっと凝ってておしゃれなアイキャッチを、なんて時にお役に立てたら嬉しいです！</p> <h1 id="blender">「blender」のいいところ</h1> <p>「blender」をしばらく触ってみて、やっぱ3Dいいな～と思った部分を少しだけ書きます…<br /> まず、何と言っても一度作成したデータの汎用性の高さに魅力を感じます。同じモデリングデータでも、ライティングやマテリアル、カメラワークなどを駆使して異なった表現に変えて再利用したり、全く違うプロジェクトに同じモデリングデータを使いまわしたりできるのが最高です！</p> <p>あとは現実でやるとコストのかかる撮影が(もちろん実物ではなく3Dデータですが)サクッとできるのも、トレンドのライティングなどを簡単に使えて嬉しいです。</p> <p>他にも言い出したらきりがないですが、そういった「blender」の利点にウキウキしながら早速データを作っていきたいと思います〜</p> <p><a href="https://www.blender.org/download/">ちなみに「blender」のダウンロードはこちら！</a></p> <h1 id="step1">モデリングデータをサクッと用意しよう(Step1)</h1> <p>あくまで”サクッと”が重要なので、複雑なモデリングは行わず、以前作成したモデルデータと、球体などの単純なモデルデータを組み合わせてグラフィックを作成します。<br /> 今回は、お手軽にリアルなレンダリングができる「Cyclesレンダー」エンジンを使用します。</p> <h2 id="section">既存のモデリングデータの「アベンド」</h2> <p>既存のモデリングデータを利用する場合、ヘッダにある「ファイル」から「アベンド」を選び、「任意のblenderファイル」＞「任意のオブジェクト」と選択します。<br /> ここでは画像のような靴のモデルデータを持ってきました。</p> <p><img alt="シューズ" src="/blog/2017/06/blender-adv/images/shoes_abend.jpg" /></p> <h2 id="section-1">基本的なモデリングデータの追加</h2> <p>次に、賑やかし的にシンプルな形状のモデリングデータを追加します。<br /> shift+Aで、球体や立方体などの基本的なモデリングデータを追加できます。今回は、「ICO球」を選択しました。</p> <p><img alt="ICO球追加" src="/blog/2017/06/blender-adv/images/ico_sph.jpg" /></p> <h2 id="section-2">プレビューを確認しながらレイアウト</h2> <p>配置したオブジェクトを、完成図を想像しながらレイアウトします。<br /> 最終的な画像は「カメラ」によって撮影し、出力します。テンキーの「0」で表示されるカメラ視点など、様々な視点から配置を確認しましょう。</p> <p>そしてプレビューですが、特に設定されてない場合は「blenderレンダー」での表示になってると思いますが、ここでは「Cyclesレンダー」を選択しましょう。<br /> プレビュー表示はshift+Zです。するとさっきよりリアルな3DCGになりました！</p> <p><img alt="Cyclesレンダー" src="/blog/2017/06/blender-adv/images/cycles_render.jpg" /></p> <p>一旦こんな感じでレイアウトしました。</p> <p><img alt="レイアウト例" src="/blog/2017/06/blender-adv/images/layout.jpg" /></p> <h2 id="section-3">マテリアルの設定</h2> <p>次にマテリアルを設定します。「blender」の「Cyclesレンダー」では、ハイクオリティなマテリアルのプリセットが用意されているので、初心者でも簡単にリアルなガラスや金属のような質感を使うことができます。<br /> 画面右にある「Propertiesウィンドウ」からマテリアルのタブを開き、編集していきましょう。<br /> 今回僕は下のように靴に対して金属の質感を与えてみました。マテリアルは「光沢BSDF」にし、各数値やカラーを下のように設定しました。</p> <p><img alt="マテリアル金属" src="/blog/2017/06/blender-adv/images/material_metal.jpg" /></p> <p>荒さと重さのある金属の質感が出ました！</p> <p>「ICO球」に対しては、「ディフューズBSDF」というマットな質感を与え、複数のカラーを作成しました。<br /> いくつかの色相がバランスよく配置されるように、プレビューを確認しながらオブジェクトの大きさなども微調整。</p> <p><img alt="マテリアルできました" src="/blog/2017/06/blender-adv/images/material_all.jpg" /></p> <h1 id="step2">撮影準備(Step2)</h1> <p>さていよいよ撮影のセッティングに入ります。<br /> ライティングや、構図、アニメーションの場合はレールを利用したカメラワークなど、個人的にはこのフェーズが一番楽しいです。</p> <h2 id="section-4">ライティング</h2> <p>「ICO球」を追加した時のように、shift+Aから「ランプ」を選び、今回はその中の「ポイント」を選びます。<br /> ちなみにランプは種類によってかなり見え方変わるので色々試してみると楽しいです。</p> <p>2つの「ポイント」を撮影する被写体の左右に一つづつ配置し、ここでは左右の「ランプ」の色相を極端に変えて、ファッション誌でよくみる感じのライティングにしてみました。<br /> 光の色や強さは「Propertiesウィンドウ」のランプタブから調節します。動作は重くなりがちですが、プレビュー状態でランプの位置や強さを調整すると分かりやすいです。</p> <p><img alt="ライティング" src="/blog/2017/06/blender-adv/images/lighting.jpg" /><br /> <img alt="ライティング 横から" src="/blog/2017/06/blender-adv/images/lighting_angle.jpg" /></p> <h2 id="section-5">被写界深度で空間を強調</h2> <p>カメラの設定で覚えておくと何かと便利な被写界深度の調整、ピントを合わす距離やボケ感を調整すると空間を表現しやすくなり、自分の思い通りの絵作りをしやすくなります。</p> <p>被写界深度は、「カメラ」オブジェクトを選択し、「Propertiesウィンドウ」のカメラタブから調整します。<br /> <img alt="被写界深度調整1" src="/blog/2017/06/blender-adv/images/camera_prpt.jpg" /></p> <p>まずは「表示」内の「リミット」にチェックを入れます。<br /> そうしたら、その下部にある「被写界深度」内の「焦点」、「絞り」の数値で被写界深度を調整できるようになります。<br /> 下の俯瞰から見た図では、カメラからまっすぐオレンジ色の線が伸び、その線に直角に黄色の線が確認できますが、この黄色の線の位置にあるオブジェクトにピントが合うことになります。「焦点」内の「距離」でこの黄色の線が前後に動くので、メインのオブジェクトに当たるように調節します。<br /> <img alt="被写界深度調整2" src="/blog/2017/06/blender-adv/images/camera_lengh.jpg" /></p> <p>ボケ感は「絞り」のサイズの数字で調整します。<br /> こんな感じになりました！</p> <h1 id="step3">撮影(Step3)</h1> <p>いよいよカメラで撮影してみます。<br /> 書き出すだけなら「blenderレンダー」と基本的に操作は変わらないのですが、一点だけ、「Cyclesレンダー」をそのまま書き出すと意図しないノイズが入ってしまうことがあります。(光量やマテリアルの設定でノイズの入り方は変わります)</p> <p>これを回避する方法は、「Propertiesウィンドウ」のレンダータブにある「サンプリング」で「間接値」を調整することです。<br /> デフォルトでは値が0になってるので、1.0に変更しましょう。これでノイズを抑えることができるかと思います！</p> <p>ここまでできたら、「Propertiesウィンドウ」のレンダータブにある「レンダー」ボタンを押すと本番のレンダリングがされます。</p> <p><img alt="レンダー結果" src="/blog/2017/06/blender-adv/images/lender_fin.jpg" /></p> <p>この画像を別名保存し、フォトショップで色味の調整、タイポを追加したものがこちら！</p> <p><img alt="出来上がり" src="/blog/2017/06/blender-adv/images/practice.jpg" /></p> <h1 id="section-6">まとめ</h1> <p>ここまでで「blender」でいい感じのグラフィックを制作する方法をサクッとご紹介しました。<br /> 最初はよくわからない部分などあるかもですが、慣れるとこれくらいの3DCGならかなりスピーディーに作れます。</p> <p>今回はマテリアルなどに基本的にプリセットを使用しましたが、nodeでの編集を覚えることでかなり微妙なニュアンスが作れたりしますし、<br /> アニメーションや物理演算などまだまだ魅力的な機能があるのでまたここに書ければなと思います。<br /> ではでは、ここまで読んでいただいてありがとうございました！</p> <h1 id="section-7">カイユウではエンジニア・デザイナーを募集中です</h1> <p>KAI-YOUでは、新しいことにチャレンジしたいエンジニア、デザイナーを募集しています。<br /> webメディアならではの、カルチャーやコンテンツからの刺激を受けられる会社で一緒に働いて見ませんか？</p> <p><a href="http://kai-you.co.jp/recruit/">RECRUIT | 株式会社カイユウ - KAI-YOU inc.</a></p> <p>カイユウ開発部デザイナー、bpmでした。</p> KAI-YOUのエンジニアインターンになって、2ヶ月間で学んだこと http://lab.kai-you.net/2017/04/28/km-intern/ 2017-04-28T18:00:00+09:00 2017-06-13T17:15:11+09:00 KM <img src="/blog/2017/04/km-intern/images/km.jpg" alt="KAI-YOUのエンジニアインターンになって、2ヶ月間で学んだこと"<p>（アイキャッチはジャニタレ並みに肖像権が厳しいKMさん）</p> <p>こんにちは。KAI-YOU開発部のインターン生KMです。</p> <p>普段は情報科の大学でネットワークの勉強をしているのですが、Webプログラミングにも興味があり、KAI-YOUではその技術を学ぼうと思い、インターン生として入社しました。</p> <p>KAI-YOUでは、バックエンドとフロントエンドの開発に携わっています。</p> <p>それから2ヶ月経ち、なんやかんやあって開発フローにも慣れたので、入社する前から今までの行動を振り返ってみようと思います。</p> <h1 id="section">入社するまで</h1> <p>KAI-YOUの存在を知ったのは2016年末。<br /> 他にもいろいろWebプログラミングを学べそうな場所はあったのですが、楽しそうな雰囲気に魅力を感じて応募することにしました。</p> <p>選考フローは書類選考、2度の面接、課題提出。</p> <p>上記を経て、2月の後半から勤務を開始しました。</p> <p>厳しいと感じたのが「課題提出」。</p> <p>その内容は</p> <pre class="highlight plaintext"><code>CakePHPを使って日記のアプリを作成。 そのコードをGitHubとBitbucketにデプロイしてそのリポジトリのURLを送って下さい。 </code></pre> <p>というもの。</p> <p>一目見たときに、<strong>知らない・見慣れない・やったことない</strong>事が3つあって絶望しました（CakePHPとBitbucketとデプロイ）。<br /> しかし、インターネットの力を借りてすべて解決できました。</p> <p><em><strong>情報の共有は素晴らしい。</strong></em></p> <h1 id="section-1">入社してから1週間目</h1> <p>当時の自分は不安もありましたが、自信もありました。前述の課題を一人でできたからです。<strong>インターネットさえあれば全て理解できる</strong>と驕っていました。</p> <p>しかし実際は、開発環境の構築に一週間も費やしました。</p> <p>KAI-YOUのローカル開発環境は、Vagrantで仮想マシンを作って、その上でnode.jsやcakephpなどを動かしているのですが、自分が使っているWindowsのマシンでは一筋縄ではいきませんでした。</p> <p>自分以外全員Macを使っていたので、ビルドコマンドがWindowsに対応していなかったのです。</p> <p>一週間無能だった自分は落ち込みました。</p> <p>メンバーがとても優しいこともあり、なおさら。</p> <h1 id="section-2">2週間目</h1> <p>ようやく開発に携われるようになった自分の初めての仕事は「<strong>キーフレーズページの表示速度を早くする</strong>」ことでした。</p> <p><img alt="【まとめ】かよちゃん(かよちゃん) とは｜キーフレーズ - KAI-YOU.net" src="/blog/2017/04/km-intern/images/kayo.png" /></p> <p><a href="http://kai-you.net/word/かよちゃん">【まとめ】かよちゃん(かよちゃん) とは｜キーフレーズ - KAI-YOU.net</a></p> <p>キーフレーズページとは、ユーザーが自由に編集できる百科事典のような機能。ここの表示速度がかなり遅かったのです。</p> <p>課題をやったおかげで、ソースコードの読み込みは遅いながらも、着実に理解を進められました。</p> <p>よく覚えているのは「そこはAjaxを使って後読みをしよう」とリードエンジニアのキャベツこうべさんに提案されたときに、Ajaxの意味も分からずに「はい」と返事をしてしまったことです（これもインターネットで解決しました）。</p> <p>何やかんやあってページの表示速度を改善できるコードができて、メンバーにレビューをしてもらいました。<br /> 結果は原型が残らないほどに修正されてしまいましたが、本番環境に反映されました。<br /> そのときに開発部の人たちが褒めてくれたのがとても嬉しかったです。</p> <p>一応役に立てたので2週間目の自分は元気になりました。</p> <h1 id="section-3">3週間目以降〜現在</h1> <p>開発のフローを教えてもらいつつ、バックエンドだけではなくフロントの開発にも興味があったので参加させてもらいました。</p> <p>フロントの開発に関しましては研修を兼ねて、ペアプログラミングで取り組みました。詳しくはこちらの記事をご覧ください！</p> <p><a href="http://lab.kai-you.net/2017/04/14/pairprogramming-navi/">インターンに研修も兼ねてペアプログラミングやってみた。 - KAI-YOU Lab</a></p> <p>知らない事ばかりだったので、入社前よりは確かに技術力が身についていると思います。<br /> 独学では絶対に触れられないことばかりで楽しいです（Google Analyticsや、SlackのAPIなど）。</p> <p>しかし、最近はOSが起動しなくなってしまい、悲しくなりました……。</p> <h1 id="section-4">週に一度みんなで遊んでいます</h1> <p>KAI-YOUのスタッフは20人弱いますが、週に一度全員で食事をしてそのあと2時間の昼休憩をしています。<br /> その時間でみんなでゲーム、TV、ボードゲームやスポーツなどで遊んでいます。</p> <p>自分は、会社でゲームをしたり、TVを見るというのはありえないと考えていたので驚きました。<br /> 最近はNintendo Switchに触れて、面白かったので欲しくなりました。</p> <h1 id="section-5">感想</h1> <p>KAI-YOUは、想像していたよりも楽しいところでした。</p> <p>「Webプログラミングが学べればいいや」と考えていたのですが、とても緩い雰囲気で、お菓子を食べつつ指導してもらえたりします。</p> <p>ただ今の技術力ではまだまだ役に立ていないので、ゲームにうつつを抜かさず、精進していこうと思いました。</p> <h1 id="section-6">リードエンジニア・キャベツこうべから</h1> <p><img alt="キャベツこうべ" src="/blog/2017/04/km-intern/images/cabbage.jpg" /></p> <p>KMさんはこれまでで唯一のエンジニアとしてのインターン生でして、<br /> 入社課題の段階から1のお願いに対して1.2〜1.5の成果というか自分なりにプラスアルファを返してくれるでめっちゃ期待してます。</p> <p>役に立たないとか言ってますが、そんなこと開発部メンバーだれも思ってないんでこれからもよろしくお願いします。</p> <p>噂ではカードゲームの才能に満ち溢れているらしいのでこんど対決してみたいと思います。</p> <h1 id="section-7">エンジニアリングしたい人募集中</h1> <p>KAI-YOUでは、なにか、これをやってみたい！ というチャレンジしたいエンジニアさんを募集しています。一緒に働いてみませんか？</p> <p><a href="http://kai-you.co.jp/recruit/">RECRUIT | 株式会社カイユウ - KAI-YOU inc.</a></p> <p>KAI-YOU開発部インターン生、KMでした。</p> インターンに研修も兼ねてペアプログラミングやってみた。 http://lab.kai-you.net/2017/04/14/pairprogramming-navi/ 2017-04-14T19:00:00+09:00 2017-04-28T16:16:59+09:00 CKS <img src="/blog/2017/04/pairprogramming-navi/images/1.png" alt="インターンに研修も兼ねてペアプログラミングやってみた。"<p>こんにちは。KAI-YOU開発部のデザイナーCKSです。</p> <p>毎日デザインをカリカリとしているぼくですが、コーディングでの開発にも参加してるデザイナーです。</p> <p>最近バックエンドができる学生がインターン生としてKAI-YOUの開発に参加してくれています。しかし彼はバックエンドだけでなくフロントにも興味があり、またKAI-YOU開発部としても、彼には幅広く参加してほしいと考えていました。KAI-YOUは職種に縛られず、自分のやりたいことをなんでもやってみて提案していく思想があります。</p> <p>そんな彼に、フロントの開発の仕方、同時にKAI-YOUでの開発フローを体感して学んでもらう為、<strong>ペアプログラミング</strong>という手法を用いて一緒に開発をしてみました。</p> <h1 id="section">ペアプログラミングとは</h1> <p>ペアプログラミングというのは、簡単に言えば一台のパソコンを主に使って2人で共同して開発する手法のことです。</p> <p><a href="https://ja.wikipedia.org/wiki/%E3%83%9A%E3%82%A2%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">ペアプログラミング - Wikipedia</a></p> <p>2人で一台のパソコンを同時に操作する・・・なんてことはもちろんせずに、一人がキーボードを実際に触ってコーディング・その他実作業を行い、もう一人がそれを隣から眺めながら設計を吟味したりエラーを発見したりします。</p> <p>作業する側を<strong>ドライバー</strong>、眺める側を<strong>ナビゲーター</strong>と呼びます。</p> <p>今回は研修も兼ねてるのでインターン生をドライバーに、僕がナビゲーターとして一緒に開発してます。</p> <h2 id="section-1">インターン生とペアプログラミングをするメリット</h2> <p>本来ペアプログラミングは一つの作業に2人で取り掛かることで集中的にタスクをこなせることが強みですが、今回は研修が目的の一つ。研修でペアプログラミングをすると以下のようなメリットが生まれます。</p> <ul> <li>開発導入からリリースまで一緒に作業するため、一連のフローを実践を通して伝えられる。</li> <li>実際のコーディングについての細かい規則を一緒に操作しながら確認できる。</li> <li>作業しつつ、即質問即返答で疑問をサクサク解消できる。</li> <li>まだ関わりの浅いインターン生と仲良くなれる。</li> </ul> <p>マンツーマンでの指導となるため、口頭だと細かすぎて伝わらないコーディング規則、更に踏み込むとエディタの便利な機能・操作方法等についてまでもが、ケースに直面次第その場で伝えられたことが個人的に大きな手応えです。</p> <h1 id="section-2">ペアプログラミングの様子・環境</h1> <p>本ペアプロは、実際に開発するのももちろんですが開発フローを頭から最後まで伝えることも重要なので、簡単で小さなタスクに十分な時間を見積もって行いました。</p> <p>ペアプロを行う環境としては、インターン生の席で行いました。会議室等で大きなモニタにミラーリングしながら行うやり方が快適ですが、今回は実際に開発している様子自体も確認したかったので席の隣にお邪魔しました。すぐ隣でとやかく言うのが憚れる場合は会議室行きましょう。</p> <h1 id="section-3">実際やってみていかがか</h1> <p>実際やってみてどんな感じだったのかというと、良い感じだと思いました。</p> <p>導入の一発最初にペアプロをやれば以降開発に参加するための、フローや規則・伴う諸注意、コードベースでの決まりごと、システムのクセなどの諸々を伝えられて導入としてペアプロは最適でした。インターン生の人となりも十分に把握でき、合間に開発に直接は関係ない、KAI-YOUについてのことなんかもちょこちょこ話しました。あそこにあるお菓子食べていいんだよ〜とか。</p> <p>開発フローは細かく見ていくと、まず開発環境を立ち上げるところから始まり、gitでブランチ分けーのプルリク書きーの・・・たくさんの段階と手順があります。一回慣れればほとんど考えることなくサクサク行えることばかりですが、フェイズごとのコツや注意・心持ち、ミスした時のリカバリー等、実は高度で一見しただけでは難解な事柄はたくさんあります。先にこれやってからプルしないとコンフリクトしがち・・・とかとか。</p> <p>また開発での各作業は、その作業を行う意味を確かに意識することが肝要です。プルリクはそれを読んだだけでレビュアーが把握できるように、コミットメッセージは後で見返した時各コミット内容が簡潔に分かるように・・・マニュアルだとなかなかカバーにしにくい事をニュアンスと共に伝えられて、この事にペアプロをやった意味を感じました。(だからといってマニュアルを放棄していい訳ではない(早くマニュアル整備しないと・・・))</p> <p>実際は複数回行ったペアプログラミングですが、2回目以降はほとんどのフェイズに置いて適切で有効なオペレーションが成されていたように見受けられました。</p> <h1 id="section-4">これから</h1> <p><a href="http://lab.kai-you.net/2015/11/05/pairprogramming/">自分がドライバーでペアプロ受けた時も同じ事を思った</a>んですが、ペアプログラミングは開発の導入・訓練に有効だとわかったので、これからも新しい人が加わったらできるだけ行っていきたいです。</p> <p>簡単なタスクにそれなりの時間をかけたのですこしリソースを使いましたが、新しいメンバーを開発に早く参加させることができるのでペアプロは一考の価値ありです。</p> <h4 id="section-5">ペアプログラミングドライバー編</h4> <p><a href="http://lab.kai-you.net/2015/11/05/pairprogramming/">デザイナーだけど開発に参加するためにペアプログラミング受けてみた。 - KAI-YOU Lab</a></p> <h1 id="section-6">エンジニアリングしたい人募集中</h1> <p>KAI-YOUは、職種を越えて何かやりたいことを積極的に勉強したり、また自由に取り入れたりしてお仕事ができる会社です。</p> <p>なにか、これをやってみたい！ というチャレンジしたいエンジニアさんを募集しています。一緒に働いてみませんか？</p> <p><a href="http://kai-you.co.jp/recruit/">RECRUIT | 株式会社カイユウ - KAI-YOU inc.</a></p> <p>カイユウ開発部デザイナー、CKSでした。</p> 年末タスクの大掃除！ 今年のタスク今年のうちにまとめてみた http://lab.kai-you.net/2016/12/28/simili-paper/ 2016-12-28T22:00:00+09:00 2017-04-28T16:16:59+09:00 ねりまちゃん <img src="/blog/2016/12/simili-paper/images/eyecatch.jpg" alt="年末タスクの大掃除！ 今年のタスク今年のうちにまとめてみた"<p>こんにちは、仕事納めのKAI-YOU開発部のねりまちゃんです。</p> <p>2016年ももうすぐ終わりですが、みなさんの大掃除のご予定はいかがでしょうか？　もう終わらせたよ〜って人もいらっしゃるんでしょうか。</p> <p>わたしたちのチームでは、せっかくなのでタスクの大掃除をすることにしてみました。</p> <h2 id="section">年末タスクの大掃除！</h2> <p>KAI-YOU.netをどんどん良いものにしていこうと会社全体で頑張っているのですが、日々の業務の中でどうしても増えていく、「あーあそこ、どうにかしたい」と<strong>気になっているタスク</strong>、「こんな新機能つけたい……けど今は無理……」と<strong>後回しになっているタスク</strong>……。</p> <p>心のどこかに重なり続け、精神衛生上悪すぎる<strong>小さな闇</strong>！　ここは、年末の大掃除！　とばかりにとりあえずみんなで洗い出しをしました。</p> <p>普段Trelloを使ってタスク管理をしているのですが、今回はより一覧できるよう、模造紙とポストイットを使って取り組んでみました。</p> <h2 id="section-1">気をつけたこと</h2> <p>ブレストの手法と同じで、とにかく</p> <ol> <li>遠慮せず出す！</li> <li>やれるかわからなくても、いつできるかわからなくても、とにかくやりたいこと、気になっていることを書き出す！</li> <li>タスクの粒度（大きさ）も考えず、とにかく出す！</li> </ol> <p>4人で出し合い、30分ほどで、50個のタスクが浮かび上がりました。ポストイットの色は、書いた人ごとの色で分けてみました。</p> <p>それを、「やりたい」「やるべき」「すぐやる」の3段階にカテゴリーを分けました。</p> <p><img alt="模造紙の全景" src="/blog/2016/12/simili-paper/images/01_paper.jpg" /></p> <p>そのうち「すぐやる」のところからすぐやれそうなものに関しては、普段使っているTrelloでカードを作り、いくつかは既に実際に作業を完了させることができました。</p> <p>いつも気にしていた細かなタスクを全て洗い出すことができてとてもスッキリ……！</p> <p>終わった後、チームの近くの壁に張り出しました。</p> <h2 id="section-2">来年もがんばります！</h2> <p>これからは、チームのメンバーそれぞれで気づいたときにどんどん貼っていき、定期的に見直してカテゴリー分け→作業できるときにTrelloに移動という順序で運用していこうと考えています。</p> <p>みなさまの会社ではこんな運用方法でやっているよ〜というのがあれば、教えていただけるとめちゃめちゃ嬉しいです。<br /> 2017年もKAI-YOU.netをよりよくできるよう頑張っていきますので、引き続きどうぞよろしくお願いいたします！</p> <p>私たちと一緒にKAI-YOU.netをもっとポップにしてくれるエンジニアも、引き続き募集しています！</p> <p><a href="http://kai-you.co.jp/recruit/">RECRUIT | 株式会社カイユウ - KAI-YOU inc.</a></p> KAI-YOUで実施しているSEO対策まとめ　サイト構造編！ http://lab.kai-you.net/2016/07/27/seo/ 2016-07-27T19:00:00+09:00 2017-04-14T18:42:27+09:00 ねりまちゃん <img src="/blog/2016/07/seo/images/eyecatch-seo.jpg" alt="KAI-YOUで実施しているSEO対策まとめ　サイト構造編！"<p>こんにちは、KAI-YOU開発部のねりまちゃんです。</p> <p>少し前のニュースになりますが、KAI-YOU.netは2016年2月1日にフルリニューアルしました！ もうみなさん新しいデザインは見ていただけていますでしょうか？</p> <p>実は、目に見えるページデザインやUIを良くする以外にも、内部ではSEOを意識したサイト構造になるよう心がけています。</p> <p>リニューアルに伴って行ったSEOを意識した施策をご紹介いたします。</p> <h1 id="seo">SEOを意識したページレイアウトについて</h1> <p>まず、リニューアル後のKAI-YOU.netのページレイアウトについて詳しくご紹介します。</p> <p>私たちが目で見てサイトを理解するのと同じように、Googleもレンダリングすることでメインコンテンツを理解し、サイトを評価しています。</p> <p>ユーザーのみなさまにももちろん、Google側にも内容をわかりやすく伝えることが重要ということになります。</p> <h2 id="kai-younet">KAI-YOU.netトップページ</h2> <p>SEOの観点からは、ファーストビュー（ページを開いてスクロールしないで表示される領域）にメインコンテンツを表示することが重要だと言われています。</p> <p>今回、KAI-YOU.netは、よりビジュアルを重視したリニューアルを実施しました。</p> <p><img alt="サイトトップ" src="/blog/2016/07/seo/images/01_sitetop.jpg" /></p> <p>リニューアル前後を比べると、ファーストビュー内に表示されるコンテンツ数が減ってしまいましたが、おおきなビジュアルでコンテンツをお見せすることを優先しました。</p> <h2 id="section">記事ページ</h2> <p>記事ページは、Webメディアにとって最も重要なページです。やはりここでもファーストビューに何が表示されているか？　という点を考えていきます。</p> <p>リニューアル前のデザインは、ページ上部にそれぞれ共通の注目記事やメニューの表示があり、記事コンテンツは、タイトルとアイキャッチの上部しか見えていませんでした。</p> <p><img alt="リニューアル前の記事ページ" src="/blog/2016/07/seo/images/04_article-before.jpg" /></p> <p>リニューアル後は、共通で表示していた部分を削除し、ページ上部から記事コンテンツが表示されるよう変更しました。</p> <p><img alt="リニューアル後の記事ページ" src="/blog/2016/07/seo/images/05_article-after.jpg" /></p> <p>また、よりファーストビューで記事内容をお伝えするために「題名直下にディスクリプションを挿入する」という案も挙がりましたが、KAI-YOU.netではまずビジュアルを大きくみせることを重視し、今回は採用しませんでした。</p> <h3 id="section-1">他媒体様で題名直下にディスクリプションを挿入している例</h3> <p><img alt="他媒体様の題名直下にディスクリプションを挿入している例" src="/blog/2016/07/seo/images/06_description-ex.jpg" /></p> <h2 id="seo-1">SEOに適した無限スクロールの実装</h2> <p>記事を読んでいると、次の記事が無限スクロールで読み込まれる仕様に変更しました。記事から記事へ画面をクリックせずに遷移することが出来ます。</p> <p><img alt="無限スクロール・記事ページ" src="/blog/2016/07/seo/images/07_scroll.gif" /></p> <p>また、特集・連載・カテゴリページでも「特集をもっと見る」をクリックすることで同じページに続きが表示されるように実装しました。</p> <p><img alt="無限スクロール・特集ページ" src="/blog/2016/07/seo/images/08_scroll-interview.gif" /></p> <p>Googleが推奨する検索エンジンに配慮した無限スクロールについては、ウェブマスターブログで詳しく紹介されています。</p> <p><a href="https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html">Official Google Webmaster Central Blog: Infinite scroll search-friendly recommendations</a></p> <h3 id="relcanonical-">ページネーション配下の rel=canonical の設定</h3> <p>無限スクロールを実装した際には、ページネーション配下のcanonicalを正しく設定することも重要です。</p> <p>よくある間違いについてはGoogleのウェブマスター向け公式ブログにも書かれているのですが、例えば、複数ページにまたがるページで、2ページ目に1ページ目へのcanonicalを指定するのは間違いです。</p> <p><a href="http://googlewebmastercentral-ja.blogspot.jp/2013/05/5-common-mistakes-with-relcanonical.html">Google ウェブマスター向け公式ブログ: rel=canonical 属性に関する 5 つのよくある間違い</a></p> <p>では、どのページにcanonicalを指定すれば良いかですが、<strong>記事全体を1ページにまとめたページへcanonicalを指定する</strong>か、ページ指定マークアップ<strong>「rel=”prev”」と「rel=”next”」を使用する</strong>方法が紹介されています。</p> <p>KAI-YOU.netでは<a href="http://googlewebmastercentral-ja.blogspot.jp/2011/12/relnext-relprev.html">「rel=”prev”」と「rel=”next”」を使用する方法</a>を採用しました。</p> <h3 id="section-2">ページネーション配下のタイトルの設定</h3> <p>また、2ページ目以降のタイトルには、ページナンバーを文頭に付与するよう変更しました。これでtitleタグの重複を避けることが出来ます。</p> <p>1ページ目</p> <blockquote> <p>『Re:ゼロ』MYTH ＆ ROIDインタビュー　Tom-H@ckが語る「アニソン市場をぶっ壊したい」の真意 - KAI-YOU.net</p> </blockquote> <p>2ページ目</p> <blockquote> <p>(2/2) 『Re:ゼロ』MYTH ＆ ROIDインタビュー　Tom-H@ckが語る「アニソン市場をぶっ壊したい」の真意 - KAI-YOU.net</p> </blockquote> <h2 id="section-3">特集・連載・カテゴリページ</h2> <p>KAI-YOU.netには、「特集」というコンテンツがあります。</p> <p>速報性の高い「ニュース」に比べて、「特集」ではインタビュー、コラム、レポート、レビューのカテゴリを設け、読み物としての充実度を重視した専門性の高い内容を掲載しています。</p> <p>特集ページ、カテゴリページには、その特集がどのようなものなのか分かるよう、オリジナルの説明文を追加しました。</p> <p>リニューアル前は100文字程度だったのですが、400〜600文字程度に文字数を増やしています。こちらの理想は1500文字以上ともいわれていますが、人間に読めないと意味がわかんなくなっちゃうのでデザインとの兼ね合いで調整すると良いと思います。</p> <p><img alt="特集ページの説明文を追加" src="/blog/2016/07/seo/images/02_interview-description.jpg" /></p> <p><a href="http://kai-you.net/feature/interview">インタビューの記事一覧 - KAI-YOU.net</a></p> <h2 id="section-4">パンくずリスト</h2> <p>細かいところですが、実はパンくずリストを正しく表示するのもGoogleにサイト構造を認識させるために大事な要素です。</p> <p><img alt="パンくずリスト" src="/blog/2016/07/seo/images/09_pan.jpg" /></p> <p>記事ページのパンくずリストは、「ホーム &gt; カテゴリー名 &gt; 記事タイトル」で表示しています。</p> <blockquote> <p>KAI-YOU.net &gt; 情報化社会 &gt; VICE Japan代表＆編集長インタビュー バンドマンからメディアの運営になった2人の苦悩と展望</p> </blockquote> <p>さらに、複数ページにまたがる記事の場合は、「ホーム &gt; カテゴリー名 &gt; 記事タイトル &gt; ○ページ目」と表示するよう修正しました。</p> <blockquote> <p>KAI-YOU.net &gt; 情報化社会 &gt; VICE Japan代表＆編集長インタビュー バンドマンからメディアの運営になった2人の苦悩と展望 &gt; 2ページ目</p> </blockquote> <h1 id="section-5">レスポンシブデザインでモバイルフレンドリーに</h1> <p>リニューアル前のKAI-YOU.netは、モバイルとPCで異なるURL構造で運用していました。</p> <ul> <li>モバイル　：　http://kai-you.net/mobile/article/30337</li> <li>PC　：　http://kai-you.net/article/30337</li> </ul> <p>今回、のフルリニューアルでレスポンシブルデザインに改修しました。</p> <p><img alt="レスポンシブデザイン" src="/blog/2016/07/seo/images/10_responsive.gif" /></p> <p>ページ設計がきちんとモバイルフレンドリーであるか、<a href="https://www.google.com/webmasters/tools/mobile-friendly/">モバイルフレンドリーテスト</a>をかけてテストして確かめることもひとつの指標になります。</p> <p>また、導入後はモバイルのURLから、該当のPCページに301リダイレクトを向けて対処しました。</p> <p>SEOとは関係ないですが、レスポンシブデザインを採用することにより、PCページとスマホページでも齟齬も発生しなくなり、結果的に開発コストも抑えられるのでおすすめです。</p> <h1 id="ampaccelerated-mobile-pages">AMP（Accelerated Mobile Pages）に対応</h1> <p>KAI-YOU.netでは、2月末にAMPにも対応しました。</p> <p>AMPとは、Accelerated Mobile Pagesの略で、モバイルページが素早く表示されるというもの。今流行ってる！</p> <p><a href="https://japan.googleblog.com/2016/02/blog-post_25.html">Google Japan Blog: モバイルウェブをもっと速く</a></p> <p>AMPに対応したwebページは、モバイルでのGoogle検索の結果上で見つけやすくなります！</p> <p>検索キーワードと関連のある記事は、検索結果内の「トップニュース」の項目下にAMP対応のページが表示されます。AMP対応しているページは、従来に比べ平均4倍の速度で表示され、データ量も約1/10に抑えられるのだそう。</p> <p><img alt="AMP" src="/blog/2016/07/seo/images/12_amp.jpg" /></p> <p>ただ、AMP実装は現時点では検索順位に直接影響があるわけではないとのことです。KAI-YOU.netをみなさんに爆速で読んでいただければ何より嬉しいことです！</p> <h1 id="section-6">低品質なコンテンツを削除</h1> <p>こちらはサイトのデザインとはまた違いますが、ドメインの評価を下げていることの要因のひとつに、評価の低いページをインデックスしてしまっていることも挙げられます。</p> <p>評価の低いページが多いサイトだと認識されると、サイト全体の評価も下がってしまうというわけです。</p> <p>たとえばKAI-YOU.netには「キーフレーズノート」というユーザーが自由に編集できる百科事典のような機能があるのですが、リニューアル前までは未編集のページもインデックス化してしまっていました。</p> <p>未編集のページは、当然ながら内容がないので非常に評価の低いページとなってしまいます。ですので、未編集のページは一律「noindex」に設定し、ドメイン全体の価値を上げるよう修正しました。</p> <p>もし、運営しているサイトに低品質なページがあれば、インデックスされないように設定するとサイトの評価が上がるかもしれません。検索流入が見込めないページはインデックスを削除するか、再編集するなりしたほうが良いってことですね！</p> <h1 id="seo-2">気になるSEO対策の結果は？</h1> <p>と、ここまでSEO対策について書いてきましたが、実際どのくらい効果がでたかといいますと、リニューアル後の2月から6月までのデータと、前年のデータを比較してみると、約2倍近いセッション数の差が出てきていることが確認できるかと思います。</p> <h4 id="section-7">下記は検索流入にのみ絞ったセッション数です</h4> <p><img alt="アクセス数" src="/blog/2016/07/seo/images/access.jpg" /></p> <p>また、KAI-YOU.net全体のセッションに対し、これまでは2割に留まっていた検索流入が、リニューアル後は4割まで増やすことができました！</p> <p><img alt="チャンネル" src="/blog/2016/07/seo/images/channel.jpg" /></p> <p>本格的にSEOを意識することによって、SNSやキュレーションアプリなどに頼りきりにならないアクセスを集めることができますし、検索で入ってくるユーザーさんは「なんとなく見てる」というよりも何か知りたい情報や目的があって見に来てくれる熱量の高いユーザーさんが多い印象です。</p> <p>検索が増えるということは、記事の価値が長く続くということでもあります。1日や2日だけしかアクセスのこない記事を書き続けるだけの人生はとても辛いですので、みなさんも是非SEO対策していきましょーー！ ねりまちゃんにも教えてください＾＾</p> <h1 id="section-8">カイユウではエンジニアを募集中です！</h1> <p>最後になりますが、株式会社カイユウでは、「POPなことが大好き！　SEOも気にしながら、より多くの人にPOPを届けたい！」というエンジニアさんを募集しています。ぜひ私たちと一緒に働いてみませんか？</p> <p><a href="http://kai-you.co.jp/recruit/career/engineer/">エンジニア | 株式会社カイユウ - KAI-YOU inc.</a></p>