vol.48 リスティング広告を始めるなら Google AdWords
ディレクターの白子です。
「リスティング広告」という言葉を聞いたことはありますか。
Yahoo!やGoogleなどの検索エンジンであるキーワードで検索した際に、そのキーワードの検索結果に関連して表示される広告です。
検索結果の上の方や右の方に「広告」と出ているテキストやバナーのことです。
インターネット環境が広く普及しWebの閲覧が世界的に標準となり、インターネットを通じたビジネスが主軸となる企業が多くなってきています。
そのためリスティング広告を始めよう、利用しようと思っている方は年々増えてきています。
今回はリスティング広告の中でGoogle AdWords（アドワーズ）をご紹介します。
Google AdWordsとは
Google AdWords（アドワーズ）は、Googleの検索結果ページに検索キーワードと関係性が高い広告を表示することができます。
広告主が指定したキーワードの検索結果に広告主のサイトやコンテンツ、商品などの広告が掲載されるので、サービスや取り扱いのある商品を探している人に限定して広告を表示できます。 また広告配信にかかる費用は、実際に広告テキストや広告バナーが、ユーザーにクリックされたときにだけ発生します。
検索結果に表示されているだけでは費用は発生しません。 検索ページの上位位置に表示され、費用も自分でコントロールできるため、注目度や費用対効果が高いサービスとして、さまざまななビジネスシーンにおいて利用することができます。
これから以下の点についてご紹介していきます。
2.キャンペーン作成
3.広告グループ、広告の内容の作成
4.便利な機能「キーワードプランナー」
※この記事は2016年6月3日時点の情報です。
Google AdWordsのアカウント作成
◎事前準備
Google AdWordsを始めるには「Googleアカウント」が必要です。事前にGoogleアカウントを登録しましょう。 Google AdWords用に専用アカウントを作成してもよいですし、今まで使っているアカウントを使用しても構いません。
◎申し込み
Google AdWordsのページにある「今すぐ開始」をクリック
◎アカウント情報入力
Googleアカウントで使用していないメールアドレスでアカウントを作成する場合は、
[他のサービスを利用していません。]を選び、使用したいメールアドレスとパスワードを入力し、画像に表示されている文字を入力して、[アカウントを作成する]をクリックします。
1. Googleアカウントのメールアドレスとパスワードを入力し、「次へ進む」をクリック。
2. 国・地域は「日本」、タイムゾーンは「（GMT+9:00）東京」、通貨は「日本円(JPY\)」を選択し、「続行」をクリック。
3.「AdWordsアカウントにログインします」をクリック。
AdWordsアカウントが作成できると、Googleから登録アドレスにメールが届きます。
※メールが届かなかった場合は、入力したメールアドレスに誤りがある能性があります。
Googleアカウントで使用しているメールアドレス以外でアドワーズアカウントを作成した場合は、 Googleから届いたメールのURLをクリックすることで、メールアドレスの認証を行うなど、手順が異なるためページの案内に沿いましょう。
◎お支払い情報入力
アカウントが作成でき、Adwordsにログインできたら右上の歯車アイコン「設定」から「料金」をクリックし、お支払い情報を設定します。
お支払方法を前払い（銀行振込、クレジットカード払い、コンビニ払い）、もしくは後払い（クレジットカード払い）から選びます。
前払いから後払い、また後払いから前払いへ変更することはできません。
（どうしても変更したい場合は、一度アカウントをキャンセルする必要があります）
・前払い
事前に支払った料金から広告料金が差し引かれます。
（支払い方法のいずれの場合でも、アカウント 残高が不足すると自動的に広告掲載が停止します）
支払い方法を銀行振込、コンビニ払いに指定すると、入金確認に1〜3営業日かかります。広告をすぐ出稿したい場合はクレジットカード払いを選択しましょう。
・後払い
広告費が発生した後に請求が行われます。
※「課金」そのものは、クリックごとに行われます。 支払い方法はクレジットカード払いのみです。
すぐに広告を出稿したい場合、後払いを選択しても、すぐ出稿できます。
請求は30日後、もしくはアカウントの支払い上限に達した時点のいずれか早い方で行われます。
広告を出稿する＜キャンペーン作成＞
実際に出向するために広告を作っていきます。
広告作成の一連の流れは以下になります。
1. キャンペーンを作成
2. 広告グループを作成
3. 広告の内容を作成
4. 広告の出稿
「キャンペーン」「広告グループ」はサイトの構成に合わせ作成していきましょう。
例えばキャンペーンはサイトのグローバルメニューで使用している名称、広告グループはその中でカテゴリ別の名称となります。
今回は作成が一番身近な「テキスト広告」を作成していきます。
◎キャンペーンを作成
・上のキャンペーンタブをクリックします。
以下のようにタブが表示されます。キャンペーンのタブをクリックします。
・タブの下の「+キャンペーン」の赤いボタンをクリック。
キャンペーンタイプの「検索ネットワーク（ディスプレイネットワーク対応）」を選択します。
この時点でどのキャンペーンタイプを選択しても、次の画面で再度選択し直すことができます。
◎キャンペーン設定
以下の項目を入力します。
・キャンペーン名
自分が分かりやすい名前に設定。
あとでキャンペーンを増やしたとき、どのキャンペーンがどの広告内容かが判別しやすくなります。
・タイプ
今回は「検索ネットワーク（ディスプレイネットワーク対応）」を選択。
・地域
広告を表示する地域、または表示しない地域を選択。
例）サービスなどを首都圏のみで展開している場合、そのほかの地域には広告を表示させないように設定できる。
・ターゲット言語
日本語を選択。
例）日本にいる人に広告を出すなら日本語を選択、日本にいる英語圏の観光客向けに広告を出すなら英語を選択。
・入札戦略
自分で上限クリック単価を変更するため「個別クリック単価」を選択。
・デフォルトの単価
広告がクリックされたとき「1クリックに最大何円をかけるか」を設定。
・予算
1日にかける予算。 月予算は設定できません。日予算×30を計算し、月予算がだいたいどれくらいかを把握して、日予算を決めます。
・広告表示オプション
広告の内容、サービスなどによりオプションを設定するかどうかを選択。
以上の項目を入力したら「保存して次へ」をクリック。これでキャンペーンの設定は完了です。
広告グループ、広告の内容の作成
次に「広告グループ」また「広告の内容」を作成します。
・広告グループの名前
・広告見出し、広告文1・2、表示URL、最終ページURL
表示URLは広告が表示されるときに一緒に表示されるURL、最終ページURLは広告を押した後にリンクするページのURLです。この2つは違うURLでも設定できます。
・キーワード
設定したキーワードが検索されると、広告が表示される仕組みです。
キーワードは2〜3くらいの複数の単語を1つのキーワードとして設定します。
最初に設定するものでも10〜20個を設定しましょう。
キーワードを設定するときに「マッチタイプ」を設定することができます。
マッチタイプとは、キーワードが検索されたときに、どこまで設定したキーワードと一致させるかを設定するものです。
・部分一致（デフォルトで設定されているため特に設定なし）
設定キーワードと検索キーワードが完全に一致しなくても広告が表示されます。より多くのユーザー向けに広告を表示したいときに選択します。
・完全一致（半角[ ]でキーワードを囲む：例）[BOEL サイト 制作]）
設定キーワードと検索キーワードが完全に一致した場合のみ広告が表示される。広告を表示するユーザーをより正確にターゲットを絞ることができる。
・フレーズ一致（半角” ”でキーワードを囲む：例）"BOEL サイト 制作"）
設定キーワードと検索キーワードのキーワードの順序が同じ場合、検索キーワードに他の単語が含まれていても広告が表示される。
以上の項目を入力して「広告グループを保存」をクリックします。
これで広告グループの設定は完了です。
キャンペーンタブに戻ると左メニューの「すべてのキャンペーン」に、今回設定したキャンペーン名が表示されます。
キャンペーンが「有効」になっていれば広告が配信されます。 必要に応じて「一時停止」「削除」を選択することもできます。
便利な機能「キーワードプランナー」
新しいキーワードや広告グループを作成する際や、既存のキャンペーンを拡充させる場合に役立つ無料のツールです。
Google Adwordsのタブ「運用ツール」からでも利用できます。
https://adwords.google.co.jp/keywordplanner
新しいキーワードを検索して候補を取得できたり、広告グループの候補を作ってくれます。
また推定入札単価や競合性、検索ボリュームなどを表示してくれるため広告を新たに作成する際や、既存の広告を質のよいものにするために役立ちます。
キーワードプランナーで検索したキーワードや広告グループはcsv形式でダウンロードできます。
おわりに
いかがでしたか？
今回はGoogle Adwordsで広告を出稿するにあたって必要最低限のことをご紹介しました。
「広告を出稿しても、費用がかかるのは広告がクリックされたとき」というのが始めやすい最大の点かと思います。
今回書いた以上の機能がAdwordsではできます。すごく便利な機能がたくさんあり、正直使いこなせていない私は日々勉強中です。
vol.47 游ゴシックの魅力と和文書体の歴史
こんにちは。デザイナーの寺田です。
今回は「游ゴシック」の魅力と和文書体の歴史についてご紹介します。
游ゴシックはここ最近、Webフォントとして使用しているサイトをよく見かけます。 BOELのサイトも最近「Noto Sans」から「游ゴシック」に変更しました。
MacとWindowsの標準フォントとしてインストールされています。 そのため、外部からフォントを呼び出すよりもサイトの表示スピードを早く表示することができます。 Windows 8.1から配布され、2015年10月のWindows 10よりシステムフォントとして採用されました。 なぜ「游ゴシック」が綺麗に読みやすいフォントとして使用されるのか分析をしています。 「游ゴシック」の魅力を紹介する前に、和文書体の歴史からご紹介します。
いくつ知ってる？和文書体の分類
和文書体の分類をみなさん、いくつ知っていますか。
「明朝体」や「ゴシック体」の2つはよく耳にすると思いますが他は、頑張って「教科書体」がでるかでないかでした。
大きく7種類に和文書体を分類することができます。
・明朝体
・ゴシック体
・楷書体（かいしょたい）
・教科書体
・隷書体（れいしょたい）
・宋朝体（そうちょうたい）
・篆書体（てんしょたい）
書体の特徴と違い
◎明朝体
・10世紀中国の木版印刷（彫刻）の分業化によって生まれた近代的な書体
・横画（よこかく）※1の右端に三角状のウロコがある
・筆で書いた時の終筆での止めを形にしている
・縦画（たてかく）※2が横画より太い
※1：漢字の横の線のこと
※2：漢字の縦の線のこと
◎ゴシック体
・ウロコがない
・縦画（たてかく）も横画（よこかく）も同じ太さに見えるように設計されている書体が多い
・起筆や終筆の先端が角張っている「角ゴシック体」と丸みを帯びている「丸ゴシック体」にわかれる
◎楷書体（かいしょたい）
・7世紀ごろに中国に現れた「真書体」の流れから来ている
・毛筆による楷書体の名筆を手本に設計された書体
・線は柔らかく、縦画（たてかく）と横画（よこかく）の太さの差が少ない
・起筆は斜めで、右角は軽く止められ、払いはゆったりとして、終筆は軽く抑えられている
◎教科書体
・中国の楷書体の毛筆による勢いを抑えて、日本で教育用図書のため設計された書体
・毛筆の穏やかな動きが様式化されていて、均質で明るく明瞭な書体
・線は柔らかく、縦画（たてかく）と横画（よこかく）の太さの差が少ない
◎隷書体（れいしょたい）
・篆書体（てんしょたい）から発展し、紀元前3年以降の中国で整えられた書体
・中国の国家標準書体として、約800年使われ民衆化した
・竹簡（ちくかん）や木簡（もっかん）に書かれ、限られたスペースに多くの文字を書くために文字が平べったくなった
・横画（よこかく）の終筆部分に見られる波のようにうねる「波磔（はたく）」がある
◎宋朝体（そうちょうたい）
・17世紀の清から現れた木彫りの特徴を残す書体
・鋭く彫った造形を持つ
・横画（よこかく）はやや右上りで、はらいが鋭い
◎篆書体（てんしょたい）
・紀元前8〜9世紀中国の戦国時代から現れた象形文字的な要素が濃厚な書体
・曲線が絡み合い、線の太さの差がない
・象形文字的な「大篆（だいてん）」と、大篆（だいてん）が簡略化された「小篆（しょうてん）」に分けられる
・「小篆（しょうてん）」は奏時代に公共の文字として規格化される
書体の分類の7つをご紹介しました。
7つを比べると「ゴシック体」がシンプルな書体であるとわかります。
こらからは「游ゴシック」の背景についてご紹介します。
游ゴシックは游明朝と一緒に使うことを想定して作られた
◎游明朝体
2002年に游明朝体が発売されました。字游工房初の独自書体です。
コンセプトは、新しい本格的な本文明朝を作り、藤沢周平の小説を組める書体を基本しました。
そこで、活版印刷に立ち返ることにしたそうです。
長文縦組みに適合し、ベタ組みを基本としました。
伝統的な形を継承しつつ、抑揚のあるしっかりしたものを目指しました。
仮名は秀英書体をベースにデザインをしています。
字游工房の設立メンバーさんの鈴木勉さんが制作をしていましたが病に倒れ、途中から鳥海修さんと字游工房の社員によってつくられました。
◎ちょっと横道。「ベタ組み」って？
ベタ組みとは、文字の全角に当たる正方形の枠（ボディ）に隙間なく並べて構成する組み方のことです。
このボディが正方形であることで日本語は、縦にも横にも組むことが可能になっています。
◎游ゴシック
2008年に発売されました。
長文でも読みやすいことをコンセプトに、游明朝をベースに游明朝と一緒に使うことを想定して作成されました。
英数字はFranklin Gothicを手本にデザインされています。
こぶりなゴシックとよく似ていますが、游ゴシックはすべての角が丸くなっており、より大人のデザインになっているそうです。
スタイリッシュかつ暖かみを与える游ゴシックを分析
今回、游ゴシックとNoto Sans Japaneseを比べて、游ゴシックを分析します。
Noto Sans JapaneseはGoogleとAdobeが共同に開発したフォントです。
世界のあらゆるフォントをサポートすることを目標に作られました。
フォントウェイトの数が多く、使いやすいフォントです。また、無償で配布されています。
游ゴシックとNoto Sans Japaneseを比べてわかったことは4点あります。
・ゴシックだけど、角に丸みがある（ウロコに似た丸みを持つ）
・独特なはらいの形を持っている
・他の文字よりカーブの丸みが緩い
・他の文字より余白がコンパクト
・ゴシックだけど、角に丸みがある
起筆部分にウロコのような丸みがあります。ウロコのような丸みを入れることで、ゴシック体にも関わらずどこか暖かみを与えていますね。
Noto Sansはウロコのような丸みをつけず、角張り少し無骨な印象です。
・独特なはらいの形を持っている
終筆時のはらいのような形をしています。線の中央部分が少しえぐれていますね。
Noto Sansも少し終筆部分がえぐられているように見えますが、よくよく目を凝らしてみないとわからない程度です。
終筆部分の塗りを少なくすることで線が鋭く見え、シャープな印象を与えます。
ここまでは、游ゴシックって明朝体の形を継承しているゴシック体なんだ。と感じました。
残り2つを細かく見ていくとなぜ游ゴシックがスタイリッシュな印象を与えるのかがわかるとおもいます。
・他の文字よりカーブの丸みが緩い
これは「ラ・シ・フ」を見てみましょう。
Noto Sansに比べ、カーブが緩いです。
丸みを出す部分を直線的にすることにより、エッジの効いた印象を与えています。
ゴシック体が丸みをつけないところに丸みをつけ、丸みの出す部分を直線的にするなんて、ギャップが激しいです。
・他の文字より余白がコンパクト
これは「コ」を見てみましょう。
游ゴシックは他の文字より、小さめに作られていることもありますが、「コ」に注目すると 「コ」の中の余白がNoto Sansよりも小さいのがわかります。
白の空間が小さいため、ひとつの文字がコンパクトでシャープに見えます。
おわりに
いかがでしたか？
和文書体の歴史や游ゴシックのコンセプトを取り上げました。
欧文書体については、前回のTIPS「vol.37識別性、可読性の高いGill Sansの歴史と特徴」と「vol.1古くから愛されるフォント“TRAJAN"の魅力」で取り上げてましたが、 和文書体についてあまり考える機会がありませんでした。
みなさんはどうでしょうか。
当たり前ですが気づいたことは和文書体は本来、縦組みを想定して作られているということです。ですが、縦組みと横組みどちらも綺麗に見ることができます。それは、日本の書体デザイナーがフォントの使うシーンをよく考えて制作しているからだと感じました。
この記事がデザイン制作の参考になればとおもいます。
参考サイト
vol.46夏の伝統色と文様
こんにちは。イラストレーターの西山です。
新緑の若葉の季節になりました。
仕事でも季節に合わせてデザインやイラストを作ることがあります。飲料やアパレル系のwebサイトを見ても春から夏らしい雰囲気になっています。
今回は夏をあらわす日本の伝統色や文様、夏にぴったりの配色をご紹介します。
夏にまつわる色、夏を感じさせる色とは？
日本では自然の色が伝統色に深く関係しています。夏といえばどんなイメージを想像しますか？
真夏の太陽に照らされたようなビビットな色だけではありません。暑さを避けるように涼しげな色を使うこともあります。
夏といっても「暑さ」「涼しさ」など印象が分かれます。
どちらも夏のイメージとしてぴったりですね。
次は夏の暑さや涼しさを色で表現する方法をご紹介します。
夏の暑さを感じる伝統色
夏の強い日差しによって、花など高い彩度の色はより鮮やかに見えます。夏の花や植物からとった色をご紹介します。
配色例
日本では重色（かさね色）という、衣装を重ねて着るときに季節の色を参考にしていました。
重色（かさね色）をそのままデザインの配色として使用するには色同士の彩度が強いため扱いづらい場合があります。
この場合は彩度対比の効果を考えて配色します。
彩度対比とは彩度の異なる色が影響しあい、色の鮮やかさが変わって見えることです。
彩度が高い色はより鮮やかになるのに対し、彩度が低い色はよりにぶくくすんで見える対比効果です。
彩度の高い色がよりはっきり見えるため、さし色などポイントで使用すると効果的です。
また、白を組み合わせることで夏の日差しを表現できます。
参考サイト
http://www.uttori-tottori.jp/#
「御菓子所 泉寿庵｜株式会社 いづみや本舗」
涼しげな伝統色
暑いときほど冷たい海や水、強い日差しをさえぎる木など寒色をイメージしたりしませんか？
涼しげな色というと青色のイメージがありますよね。
その他に若竹色（わかたけいろ）や小鴨色（こがもいろ）を使った高原の夏を思わせる配色をご紹介します。
配色例
全体を寒色系にまとめて涼しさを出したり、白を加えて清潔で爽やかな印象になります。
参考サイト
飲料系のサイトでは涼しげな色をグラデーションさせて清涼感を出しています。
「冷やして愉しむ 夏の日本酒 「日本酒がうまい！」推進委員会」
http://www.ozeki.co.jp/reisyu/
「綾鷹（あやたか）」
写真から色を抽出する
夏に撮影した写真から色を抽出するのもよいかもしれません。 写真から抽出する際は実際にスポイトツールでとった色と、実際に目で見た色を比較すると 写真よりも彩度が高くなったり、同じ色に見えない場合があります。 その際は実際に目で見て調整します。
夏ならではの文様
夏の色と組み合わせて風物詩である文様）を一緒に配置すると夏らしさがさらに際立ちます。
今回は金魚など水辺の生き物の文様をご紹介します。
麻の葉文（あさのはもん）
麻の葉を連想することから名付けられた模様です。
まっすぐに伸び成長する縁起物として古くから親しまれ、現代でもwebサイトや商品のパッケージに多く使われています。
シンプルな幾何学文様で構成されており、着物のように全体に敷き詰めても落ち着いた印象を与えます。
「和果ごこち 日向夏サイダー」
https://www.dydo.co.jp/corporate/news/2015/150318.html
青海波（せいかいは）
自然の波を意匠化した文様です。
古くから雅楽の装束や工芸品に用いられる伝統的な文様です。
麻の葉紋と同じく幾何学的な文様は背景やちょっとしたアクセントとして使用できます。
「組子文様デザイン 青海波 日本伝統装飾｜組子のタニハタ」
http://www.tanihata.co.jp/monyou/seikaiha.htm
金魚文（きんぎょもん）
模様としての歴史は浅いですが、華やかな姿が人気の高い文様です。
一匹だけでも作品にインパクトが出るだけでなく、流水や水草と合わせて涼しく見せられます。
Web Designing 2012年7月号
http://book.mynavi.jp/wd/2012/07.html
朝顔文（あさがおもん）
夏に咲く代表的な花です。浴衣や着物の文様として使われることが多く、暑さをしのぐアイテムや涼しげなデザインの中に使用されます。
「染の安坊 通販店（手ぬぐい 朝顔更紗 色）」
紫陽花文（あじさいもん）
紫陽花は雨のイメージを連想させ、涼しげな印象を与えます。
暑い日に用いるグッズの柄としても多く使われます。
「nugoo 【拭う 鎌倉】 本染め手拭いの通販ページ（あじさい小道 折りたたみ日傘）」
まとめ
いかがでしたでしょうか？
日本の身近な景色から生まれた伝統色だけに、季節の微妙な変化にも対応した色が揃っています。 浴衣や着物も季節のものを文様とともに表しているので、配色の参考になります。 また身近なものにも伝統色を使ったものが増えているため、伝統色を使ったデザインやイラストを作る楽しみが増えますね。
出典：ANA鳥取美人物語
出典：大阪のお土産は御菓子所 泉寿庵｜株式会社 いづみや本舗
出典：冷やして愉しむ 夏の日本酒 「日本酒がうまい！」推進委員会
出典：組子文様デザイン 青海波 日本伝統装飾｜組子のタニハタ
出典：染の安坊 通販店
参考：和の用語の全てを集約した総合着物辞書 - きもの用語大全
参考資料：伊達千代「配色デザイン見本張」
参考資料：佐野 敬彦「日本の配色
vol.45 すぐに使える！アコーディオンメニューの実装
こんにちは。エンジニアの富澤です。
今回はWebページでよくみかけるアコーディオンメニューについて勉強しましたのでご紹介します。
アコーディオンメニューは、限られた範囲で多数の項目を一覧したいときに便利です。
※本TIPSではHTMLとCSSの基本的な知識があることを前提とします。
また、jQueryも使用しているためこちら（jQueryサイト）からソースをダウンロードするかgoogleなどが配信しているCDNサービス（https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js）を利用し、HTMLに読み込んでください。
シンプルな実装
シンプルなアコーディオンメニューを実装していきます。
html
<div class="a_container">
<div class="a_item">demo</div>
<div class="a_contents">
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
</div>
</div>
css
.a_container{
width:500px;
margin:50px auto;
}
.a_item{
background:#70f9a1;
color:#fff;
text-align:center;
padding:10px;
cursor:pointer;
}
.a_contents{
display:none;
padding:10px;
height:110px;
border:solid 1px #d6dddf;
}
.a_contents p{
margin:10px 0;
border-bottom:dashed 1px #d6dddf;
}
jQuery
$(document).ready(function(){
$(".a_item").click(function(){
$(this).next().slideToggle(300);
});
});
class名「.a_contents」を「display:none;」に設定し、アコーディオンメニューのコンテンツ部分を非表示にしておきます。
class名「.a_item」に対しクリックによって発動するイベント「click(function(){});」を、その中に「slideToggle()」を設定し、クリックした時にスライドしながらコンテンツ部分が開閉するようにします。
ワンポイント
.click(function(){});
クリックした時に処理を実行するイベントを登録できます。特定のclass名、id名に対して、設定をすることができます。ここではclass名「.a_item」がクリックされたときにイベントを発生させます。
$(this).next().slideToggle(300);
「this」はイベントを登録している要素に対し、そのアクションを行った要素のみに有効です。class名などを指定すると、「そのclassがあたっているすべての要素」に対して発動してしまいますが、「this」にすると押したボタンに対してのみにイベントが有効になります。
「next()」は、「次」にあたる兄弟要素を指します。ここでは、クリックしたボタンの次の要素のコンテンツ部分（「.a_contents」）を指します。
「slideToggle()」は要素が非表示の時はslideDownを行い、要素が表示している時はslideUpを行います。（）内には時間を指定することができます。「slideToggle(300)」の場合、アニメーションに0.3秒の時間をかけて動作します。
リッチな実装
シンプルなアコーディオンメニューを元に機能を増やし、リッチな実装にしていきます。
増やしていく機能を下記にまとめました。
・マウスオーバーしたとき、色を変化させる
・クリックしたとき、選択中のものに色をつける
・一方が開いていて、開いていない方のアコーディオンをクリックしたとき、
開いているアコーディオンを閉じる
・クリックし、選択したものの本文を遅れてフェードインさせる
・右側の矢印に開閉が分かるようなアニメーションをつける
html
<div class="a_container">
<div class="a_item_r">demo</div>
<div class="a_contents_r">
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
</div>
<div class="a_item_r">demo</div>
<div class="a_contents_r">
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
<p>ダミーダミーダミー</p>
</div>
</div>
css
.a_item_r{
background:#70f9a1;
color:#fff; text-align:center;
padding:10px; cursor:pointer;
position: relative
}
.a_contents_r{
display:none;
padding:10px;
height:110px;
border:solid 1px #d6dddf;
}
.a_item_r:hover{
background-color:#6aec99;
}
.selected{
background-color:#ffc44d;
}
.a_contents_r p{
display:none;
margin:10px 0;
border-bottom:dashed 1px #d6dddf;
}
.a_item_r:after{
background:url(arrow_dw.png) no-repeat left top;
content: "";
display: block;
width: 20px;
height: 12px;
position:
absolute;
right: 20px;
background-size: 100% auto;
top:15px;
bottom:0;
-webkit-transition: 0.3s linear;
-moz-transition:0.3s linear;
-ms-transition:0.3s linear;
transition: 0.3s linear;
}
.open_close_r:after{
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
ポイント１ 擬似要素「:hover」
指定することでマウスオーバーしたとき、CSSに変化を与えることができます。
ここでは「.a_item_r:hover」にbackground-colorを指定することで「.a_item_r」をマウスオーバーしたとき、色に変化をさせることができます。
ポイント２ 擬似要素「:after」
要素の末尾に要素を追加し、CSSでデザインすることができます。
ここでは右側の矢印を「:after」で挿入しています。「:after」を使うときcontent:""を指定するのがポイントです。
ポイント３ 「transiton」
時間的変化をまとめて指定することができます。ここでは「transition: 0.3s linear;」（0.3秒間を一定のスピードで変化）を指定しています。 これにより上記ソースにある「transform」のスピードを調整しています。
ポイント４ 「transform」
要素に対して回転させたりする動きを適用する際に使用します。ここでは「.open_close_r:after」に「transform: rotateZ(180deg);」を指定することで、アコーディオンメニューが開いた時に180度回転する設定をしています。
※「transition」「transform」は、CSS3から新しく登場したプロパティで記述の際、各ブラウザ用の"ベンダープレフィックス"が必要になります。
-webkit-transform : Safari,Google Chromeなど
-moz-transform : Mozila Firefox系
-ms-transform : Internet Explorer系
$(document).ready(function(){
$(".a_item_r").click(function(){
$(".a_item_r").removeClass("open_close_r");
$(".a_contents_r p").css("display","none");
$(this).next().slideUp(300);
$(this).removeClass("selected");
if($(this).next().css("display")=="none"){
$(this).addClass("open_close_r");
$(".a_contents_r").slideUp(300);
$(this).next().slideDown(300);
$("+.a_contents_r p",this).fadeIn(1500);
$(".selected").removeClass("selected");
$(this).addClass("selected");
}
});
});
class名「.a_item_r」に対しクリックによって発動するイベント「click(function(){});」を設定します。
その中に、2回目以降の動作を正しく実行するよう
「$(".a_item_r").removeClass("open_close_r");」→「.a_item_r」から「.open_close_r」を消去
「$(".a_contents_r p").css("display","none");」→「.a_contents_r p」を非表示にする
「$(this).next().slideUp(300);」→クリックした要素の次の要素に対しslideUpする
を設定しておきます。
次に、ifについてです。if構文は「条件分岐」といいます。
「if($(this).next().css("display")=="none")」は、もし「this」の次の兄弟要素が非表示ならば、何らかの処理を実行する、という意味になります。
何らかの処理に値する部分はif( 条件式 ) { 何らかの処理 }中括弧部分に記述します。
$(this).addClass("open_close_r"); 「open_close_r」を追加する
$(".a_contents_r").slideUp(300); 「.a_contents_r」をスライドアップする
$(this).next().slideDown(300); 「this」の次の兄弟要素をスライドダウンさせる
$("+.a_contents_r p",this).fadeIn(1500); 「"+.a_contents_r p",this」をフェードインする
$(".selected").removeClass("selected"); 「.selected」に対し「.selected」を削除する
$(this).addClass("selected"); 「this」に対し「selected」を追加する
・マウスオーバーしたとき、色を変化させる
.a_item_r:hover{background-color:#6aec99;}
background-colorを指定することで「.a_item_r」をマウスオーバーしたとき、色に変化をさせることができます。
・クリックしたとき、選択中のものに色をつける
$(this).removeClass("selected");
$(this).addClass("selected");
「removeClass」は指定したclassの削除をします。「addClass」は指定したclassの追加をします。
ここではマウスオーバーしたときのために入っています。
・一方が開いていて、開いていない方のアコーディオンをクリックしたとき、開いているアコーディオンを閉じる
$(".a_contents_r").slideUp(300);
$(this).next().slideDown(300);
最初に開いているアコーディオンを閉じる処理をし、次にクリックしたアコーディオンを開きます。
・クリックし、選択したものの本文を遅れてフェードインさせる
$("+.a_contents_r p",this).fadeIn(1500);
「fadeIn()」プロパティをつかって、非表示の要素をフェードインさせます。
ここでは、アコーディオンメニューが開いたときに文字がフェードインするようにしています。「.fadeIn(1500)」の場合、アニメーションに1.5秒の時間をかけて動作します。
・右側の矢印に開閉が分かるようなアニメーションをつける
$(".a_item_r").removeClass("open_close_r");
$(this).addClass("open_close_r");
「.open_close_r」が矢印のアニメーションに必要な設定になっています。
そのため、「removeClass」と「addClass」を用いてclassの削除と追加をします。
アニメーションの設定はCSSで設定しています。
ワンポイント
if( /* 条件式 */ ){
/* 何らかの処理 */
}else{
/* 別の何らかの処理 */
}
if内の要素が真である場合に処理を行います。偽の場合、else{}内の処理を行います。
CSS3での実装
これまではHTML+CSS+jQueryで実装を行いました。実はCSSのみでの実装も可能なのです。
CSSのみで実装を行うためにはフォームの構成部品であるチェックボックスのON・OFFを利用します。
html
<div class="a_container">
<label for="Panel1">demo<label>
<input type="checkbox" id="Panel1" class="open_close_c"/>
<ul>
<li>ダミーダミーダミー<li>
<li>ダミーダミーダミー<li>
<li>ダミーダミーダミー<li>
<ul>
<div>
css
label {
display: block;
background-color: #70f9a1;
color: #fff; padding: 10px;
text-align:center;
}
label:hover{
background-color:#6aec99;
}
input[type="checkbox"].open_close_c{
display: none;
}
ul{
border:solid 1px #d6dddf;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
margin: 0;
padding: 0;
list-style: none;
}
li{
margin:10px 0;
color:#666666;
border-bottom:dashed 1px #d6dddf;
}
input[type="checkbox"].open_close_c + ul{
height: 0;
overflow: hidden;
}
input[type="checkbox"].open_close_c:checked + ul{
height: 110px;
padding:10px;
}
class名「.open_close_c」に「display:none;」を設定し、チェックボックス自体は非表示にします。「ul」に対してアニメーションが発生したときのスピードを、「transition」で設定します。
「ul」を非表示にする際には「display」での非表示をつかわず、hightをつかいます。
「transition」のアニメーションがdisplayに対して無効のため、アニメーションにできないからです。
設定は「height:0;」「overflow:hidden;」とします。
チェックボックスをチェックしたとき、「height:auto;」を設定することで、「hight」が0から110pxになる過程が、アニメーションするようになります。
非表示のチェックボックスをチェックするような動作をさせるために「lavel」を利用します。
「input type="checkbox"」に対して、idを設定しておきます。
「label」タグ内にforを設定します。「for」は「input type="checkbox"」で設定したid名と同様にしておきます。
この設定をすることにより、「label」をクリックとチェックボックスのON・OFFが連動するようになります。
これによって、
「input[type="checkbox"].open_close_c + ul」の場合（チェックされていない場合）と
「input[type="checkbox"].open_close_c:checked + ul」の場合（チェックした場合）で
CSSを分けて書くことができます。
ワンポイント
input[type="checkbox"].open_close_c:checked + ul
「input[type="checkbox"」は、属性を使ったCSSの指定方法です。属性名や属性値によりスタイルの適用を指定することができます。
「input[type="checkbox"].open_close_c:checked + ul」は、クラス名「.open_close_c」を持つ「input[type="checkbox"」の次の兄弟要素である「ul」対してCSSをかけるための記述です。
まとめ
いかがでしたでしょうか？
アコーディオンメニューは、「click」イベントを用いて対象に「class」を追加することで様々な実装をすることができます。しかし、jQueryはソースを上から読み込んでいくため、記述は正しくても順番が違うと実装できないことがあり苦労しました。またCSS3の登場でjQueryを使わなくても実装可能になりました。今後も新しい実装方法が出てくるかも知れません。Web業界の進歩はとても早いので遅れをとらぬよう、日々勉強していきます。
vol.44 モバイルページ高速化 AMP HTMLを作成してみよう
こんにちは。エンジニアの毛利です。 PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。
Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。
高速化のアプローチ方法は、Webプログラミングの最適化、画像の最適化、サーバー強化、チューニング、検索エンジンへの最適化など様々な方法があります。
Googleをはじめとして様々な検索エンジンはユーザーのニーズに応えるため、検索エンジンでの表示をモバイル最適化を優先、優遇しています。
「モバイルファースト」の概念が、一般的に定着してつつある中、 Googleはスマートフォンで静的なページを瞬時に表示できるようなフレームワークの提供を開始しました。
それが「AMP」。
今回はWebを高速表示させるための新しい枠組み「AMP」についてご紹介します。
AMPとは
Accelerated Mobile Pagesのことで、Google主導のもと、モバイルページの速度向上のために発足したオープンソースプロジェクトです。
AMP HTMLという新しいフレームワークの規則に沿って、コーディングを進めていきます。
従来HTMLそのままの形だと、画像やインタラクションなど、流用できない部分が多々あり、新たにデザイン、コーディングが必要になるものが多いです。 ただ、タグに関してはほとんどHTMLのマークアップ規則のもとで記述できるので、コツさえおさえれば間違いのないものになります。
プロジェクトが発足してすでにページに組み込まれているAMPですが、現在も開発が進んでおり、今後AMP専用の新しいカスタムタグが増えるそうです。
基本的なサンプルは以下のサイトで書かれていますので、これらを実際にコーディングをしてポイントをおさえていきます。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md（英語）
AMPのよい所
・表示速度が早い
単純な高速化だけではなくAMP HTMLでマークアップすることで検索エンジン側のサーバーにキャッシュされる仕組みとなっています。
・AMPコンテンツとして画像付きでわかりやすい一覧が表示される
検索トップに画像付き一覧で表示されるため、他コンテンツと比較し目立ちます。
AMPの注意点
・AMP HTMLフレームワークの規則に沿ってコーディングをするため、従来のHTMLを変えなくてはならない
記述そのものに制約や独自のきまりがあり、外部から自分で記述したcssやjsも読み込めません。
・タグの使用に制限がある（img、iframe、form、inputなど）
高速化、コンテンツ最適化のためにいくつかのタグは使用することを制限、もしくは禁止されています。
imgやiframe等はそれぞれamp-img、amp-iframeなどのカスタムタグを使うように決められています。
formやinput等は仕様が禁止されています。
h1などの見出しタグ、div、p、ul、li、tableタグなど基本的なタグは使用可能です。
・JSが使えない
Javascriptは原則使えません。AMPページを検索結果に表示する時に必要な「application/ld+json」のみ記述できます。
AMPでコーディング
コーディングを進めていくためのポイントを解説していきます。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="オリジナルページのリンク">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
</html>
!doctype
宣言はhtml5と同様になります。
html
「<html ⚡>」もしくは「<html amp>」と記述します。
link rel="canonical"
オリジナルページのURLを記述します。
meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
<style amp-custom>
オリジナルのCSSはここに記述します。外部CSSを読み込むことはできません。
<script type="application/ld+json">
schemaの記述ができます。
amp-carousel-0.1.js
必ず読み込みます。
<style amp-boilerplate>
必ず記述します。内容の変更はできません。
img
画像はamp-imgというカスタムタグで読み込みます。
width、heightが必須項目です。layoutというオプションが4種類あります。
amp-pixel
analyticsコードを入れます。
tid=アナリティクスID
画像のlayoutオプション一覧です。
fixed
width、heightに従い、固定幅になります。
responsive
コンテンツ幅に応じて、画像が拡縮します。画像比率はwidth、heightに基づきます。
fixed-height
縦幅のみ固定になります。widthは指定しない、もしくはautoにします。
fill
ブラウザの有効幅いっぱいに表示されます。画像比率は保持されません。
json Schemaの記述です。必須項目を抜粋しました。
Google Developerから情報が出てますので、推奨項目も含めた詳しい情報はこちらを参照下さい。
Mark Up Your Content Items | Search | Google Developers
headline
見出しを110 文字以内で書きます。
image
記事の画像です。
image.url
画像URLです。
image.height
image.width
画像の幅を設定します。画像の横幅は696px以上です。
publisher
記事の発行者を書くのに必要な項目です。
publisher.name
発行者の名前です。
publisher.logo
ロゴの名前です。
publisher.logo.height
publisher.logo.width
ロゴの幅を設定します。
datePublished
記事が公開された日時です。ISO形式で書きます。
author
記事の著者情報の項目です。
author.name
著者名です。
最後にオリジナルページに下記のタグを挿入します。
<link rel="amphtml" href="./amp/vol44_amp.html">
なお、公式のガイドラインは下記のページにのっていますので一度目を通してみてください。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags（英語）
まとめ
以上がAMPのためのコーディングのポイントになります。
現状、AMPが検索エンジンに適用されているサイトがあまりなく、確実に確認できるのがGoogleがAMPプロジェクトのパートナーとして認めているメディアサイトでしょうか。
（産経新聞やマイナビニュースなどをGoogle検索すると確認できます。）
検索方法も確立しておらず、どうすればAMPが表示されるかはしばらく試行錯誤が必要なのではないでしょうか。
今回TIPSで作ったHTMLを設置し、サイトをAMPとして表示させるために色々と模索していきたいと思っています。
vol.43 動画コーデックをマスターしよう
こんばんは。ディレクターの白子です。
動画編集をしたり、編集した動画を書き出す際に必要になってくる「コーデック」。
たくさんの種類があり、どこでどのコーデックを使うのがいいのかなど
迷ってしまいますよね。
今回は、動画を編集する際に必要なコーデック、 動画を書き出す際に必要なコーデックをご紹介します。
（使用PC：Mac／アプリケーション：Adobe premiere CC）
そもそもコーデックとは？
動画は簡単にいうと「静止画がたくさん集まったパラパラ漫画のようなもの」です。
動画の編集の際に必ず出てくる「フレームレート」は1秒間に何枚静止画が使われているかを表すものです。
例えば「1920×1080」のフレームレート「30fps」は1秒間に1920×1080の静止画が30枚使われていることになります。
そうなると1分間に「1920×1080」の静止画が「1800枚」必要となります。
この膨大な静止画の集合をそのまま動画にしてしまうと、短い尺でも何GBという大きなファイルサイズになってしまいます。
そのため「コーデック」という「圧縮のアルゴリズム」を使い、何枚もの静止画を色々な方法で動画ファイルへと圧縮しています。
圧縮することで、動画のファイルサイズを大幅に小さくしています。
コーデックの圧縮方法
コーデックで圧縮する方法は主に2つの方法があります。
1：可逆圧縮（ロスレス圧縮）
圧縮したデータをデコード（再生）したときにオリジナルと全く同じ状態（音質・画質が劣化しない）に復元する圧縮方法。
ファイル内のまとめられる部分をできうる限りまとめファイルサイズを圧縮します。
無圧縮データよりもファイルサイズは小さくなりますが、非可逆圧縮と比べるとファイルサイズは断然大きいままです。
オリジナルデータを損ねないという点でとても優れていますが、ファイルサイズの大きさ、また汎用性の面で非可逆圧縮コーデックの方が扱いやすいです。
2：非可逆圧縮
圧縮したデータをデコード（再生）したときにオリジナル通りに復元できない（音質・画質が劣化する）圧縮方法。
人が、見分け（聞き分け）られないレベルの部分をなくしてファイルサイズを圧縮します。
圧縮率が高いほど削ぎ落とされるデータ量が増えるので、圧縮率は高くファイルサイズは小さくなりますが、音質・画質は劣化してしまいます。
代表的なビデオコーデック
たくさんの種類がある中で代表的なものはMPEG-1、MPEG-2、MPEG-4/AVC（H.264）、DivX、WMVなどです。
今主流のコーデックはMPEG4 AVC（H.264）。
MPEG4、AVC、H.264など呼び方はちがいますが全て同じものです。
高画質で圧縮率も高く、低ビットレートから高ビットレートまで対応、Blu-Rayや最新のビデオカメラなどに採用されています。
Apple ProRes 422について
そんなたくさん種類がある中でのおすすめはApple ProResです。
ほとんど劣化がなく、放送レベルの映像をMacでも編集できるデータの規格です。
非圧縮のファイルよりファイルサイズが小さく、動作性もよく編集時の操作性が損なわれません。
SDファイルサイズで HD画質を実現しているため、映像業界で広く採用されています。
動画の編集はアプリケーションを行ったり来たりを繰り返して進んでいきます。
色調整や補正をしてレンダリング（書き出し）、特殊エフェクトを使ってレンダリング、映像のカットの並び替えをしてレンダリング、文字を入れてレンダリングして…というように何回も映像に手を入れてレンダリングすることになります。
何度も何度もレンダリングを繰り返すうちに、映像ファイルはどんどん劣化してしまっています。
その点、ProResは何回レンダリングを繰り返しても品質が劣化しない特徴があります。
私も過去には、何度もレンダリングを繰り返し、その度に画質が悪くなっていく…という経験をしました。
そのときはエンコード（変換）の設定が合っていなかったのかを必死に探していましたね。
動画の編集は編集する映像をまずProResに変換して、ProResで編集、ProResで書き出し…とProResで完結するため幅広く支持されています。
実際にMacでProResを使う
まずは以下のページからにProRes書き出し用のプリセットをダウンロードします。
そしてAdobe Media Encoderにプリセット（.epr）を読み込めば使えます！
Adobe premiereを使用している場合、直接premiereから書き出すこともできるのですが一度に複数書き出すときなどにMedia Encoderを使うと便利です。
エンコードに使うコーデックの選び方
最終的に編集した動画を書き出す場合、動画の使い方によって使うコーデックはかわってきます。 Youtubeにアップする、Facebookにアップする、Instagramでアップ…など、SNSだけでも様々なファイル形式が必要になってきます。
動画はコンテナと呼ばれる規格の中にさまざまな圧縮形式で、圧縮された動画が格納される構造になっています。
そのため形式(コンテナ)の種類をまず選択します。
形式の選択
よく使用される形式についてご紹介します。
・MPEG2
容量が少なく他に比べると処理時間も短い
・Microsoft AVI
Microsoftが策定した規格
・QuickTime
Appleが策定した動画の規格。
macで見る場合などにQuickTimeがいいでしょう。
他の形式よりも多少サイズが大きくなる傾向があります。
・H.264
Blu-rayなどで利用されている新しい規格で、容量が軽く高画質なのですが、圧縮に時間がかかる。
youtubeなどが推奨しているのはこの規格です。
・WindowsMedia
非常に容量が軽く、ネットにアップしたりするには便利ですが、画質はそれほどよくない。
プリセットの選択
次に動画を使用する用途に合わせてプリセットを選択します。
「こう使いたい！」にピッタリ合ったプリセットがあれば、この後の設定は全部自動で選択してくれます。
用途に合うプリセットがない場合は、カスタムで設定していきます。
・NTSC DV
日本で使用されている非ハイビジョンテレビくらいの画質といわれています。
（PALはヨーロッパで使用されている形式。国内では使用する機会はほぼない）
・NTSC DV ワイド
上記と同じ解像度ですが、画面の比率が16:9で、ピクセル縦横比が1.2。
・HDV/1440×1080
HDVテープに記録を行う形式で、HD（ハイビジョン）です。
AVCHDと比べると編集に必要なマシンスペックが低くてもよい点や、テープメディアに記録できる点に安定性があり、業務用途で使用されています。
画面サイズは1440×1080、29.97フレームです。
・720p
画面サイズ1280×720で、ハイビジョンの中では最も解像度が低い規格です。
pはプログレッシブ形式の記録形式です。エフェクトや合成を行うのにオススメです。
・1080i/p
画面サイズ1920×1080です。フルハイビジョンと呼ばれます。
最も解像度が高いため、データ容量は重くなってきます。
コーデックの選択
ここで圧縮の形式を選択します。
形式でH.264などを選んだ場合には、圧縮形式も自動的にH.264となってしまうため、選択出来ない場合があります。
・H.264
高画質ですが、処理に時間がかかります。
・DV NTSC
DV画質の圧縮形式。画質と比べ容量が大きい。
・なし(非圧縮)
圧縮がかかっていないので、最も高画質で劣化が無い状態です。
そのため容量がとても大きく不便です。容量が大きいので、低スペックのPCだと再生に負荷がかかったり、再生出来ないということが起こります。
合成などで使用する場合には非圧縮がオススメですが、撮影段階から非圧縮データで保存していた方がよいです。
ムービーの画面サイズを設定
使う用途によって画面サイズは変化します。
一般的な用途としては以下のサイズが考えられます。
・ 640×480：PC上で4：3の画面比率として使用される
・720×480：HD(ハイビジョン)でないアナログテレビの画面サイズ
・ 1280×720：一番解像度の低いハイビジョンの規格
・ 1440×1080：HDVなどで使われるハイビジョンの解像度
・ 1920×1080：フルハイビジョン
フレームレートの設定
一般的には29.97です。
24フレームなどを利用する場合は、撮影段階からフレームレートを考えておいた方がよいでしょう。
おわりに
いかがでしたか？
コーデックなどと一言でいってもたくさんの種類があり、それにまつわる設定がたくさんあります。
これらを全て覚えなくても必要なもの、よく使うものをまずはおぼえていければと思います。
参考サイト
Adobe Premiere Pro CCは、ノンリニア編集ソフトのデファクトスタンダード（業界標準）か!?
Adobe Media Encoder CC でProRes変換
QuickTime-ProRes422とは一体…
vol.42 コンフリクト、エラーに対応しよう！ Github運用実践編
こんにちは。Webエンジニアの毛利です。
今回はGitHubについての話です。 GitHubではソースやファイルを管理するとき、複数の更新者が同時に更新しても変更点のみが蓄積されていくのでファイルをサーバーから直接ダウンロードしたり、そのためファイルの受け渡しや、最新版かどうかを確認したり、間違えて古いファイルを編集してしまった場合のリカバリーなどの必要がなくなるため、ファイル管理の手間が大きく減少します。
ただ、一方で問題も起こります。
よく発生する問題が「コンフリクト」です。
今回この「コンフリクト」がどの場合にどういう風に起こるのか、デスクトップアプリを運用してわかったことをまとめていきます。
また「コンフリクト」以外のトラブルに関しても「commit」、「syncできない！」「デスクトップアプリケーションが動かなくなった！」などといった問題を「Github Desktop」アプリケーションで運用する際、解決する際に、役立ちそうな方法をご紹介します。
コンフリクトとは？
「変更の競合」を指します。複数人で同じファイルを編集し、同じ箇所を変更したり、
編集者が記述の順番を大きく変えたりなど変更があったとき、変更をマージできなくなる現象です。
どのような場面で起こるのか？
「Github Desktop」の場合、変更点をリモートリポジトリにcommitをpushするときに起こります。
具体的な操作方法は変更点を「commit」し、「Sync」するときに発生します。
コンフリクトが発生すると、黄色で示されます。
どうすれば解決できるのか？
この状態になったら、一度commitを「undo」し操作を取り消し、もう一度「Sync」を押します。
そうすると、コンフリクトを起こしたファイルに以下のようなメッセージが入ります。
========の上に表示されているのが「リモートリポジトリ」の変更点で、
========の下に表示されているのが「ローカルリポジトリ」自分が行おうとしている変更点です。
「Github Desktop」のアプリケーションでは基本的に==の下が自分が行った変更点として表示されます。
これらは内容を確認し、手動で修正する必要があります。
リモートリポジトリに反映した作業者に確認が必要な場合は確認をしてから変更を行うようにしましょう。競合箇所を修正し、再度「commit」、「Sync」することでコンフリクトを解消できます。
※コンフリクトが起こったファイルを修正せずに、そのままcommitしリモートリポジトリにpushしてしまうとエラーの文言が入った状態で「正しいデータ」として反映されてしまいます。
コンフリクトが起こった場合は必ずソースを確認し、手動で修正する必要があります。
Githubから出されるメッセージはよく確認しましょう。
コンフリクトを起こす「Github」運用4選
ローカルリポジトリから最新ファイルを取得しないで編集する
長い期間編集しておらず、他編集者が変更を加えていた場合、変更をリモートリポジトリから取得せずに編集を続け「commit」してしまうと高確率で起こります。
作業開始前には必ず「Sync」し、ローカルデータを最新化しましょう。
同時に同じファイルの同じ箇所を編集する
同じソースの同じ箇所を編集していると起こります。
共同作業者と連絡が取れる場合、自分がどこを編集するか伝えましょう。
編集箇所が競合する場合、作業のタイミングをずらしましょう。
ファイルサーバーから取得してファイルを更新する
リポジトリからデータを取得するのではなく、Webを公開しているサーバーなどからデータを取得して反映した場合に起こることがあります。
あまりこのような事を行うことはないと思いますが、サーバーOSによっては改行コードが変わってしまったり、見えないところでファイルの情報が変わってしまい、Githubのリポジトリデータとは全く同じデータではないかもしれません。
改行コードが変わってしまったとき
改行コードが変わると全行変更扱いになります。また、CRは基本的に認識されません。
（改行が反映されているはずなのにGithub上では全て1行に見える場合はこの状態になっている場合が多いです。）
改行コードはCRLF（Windows）、LF（Mac OSX、Linuxなど）が標準的です。
コンフリクト以外のエラー
コンフリクト以外にデスクトップアプリケーションのエラーがあります。
運用していて比較的起こりやすいエラーについて以下にまとめてみました。
文字エンコーディング
最近ではutf-8がほぼ定着しましたが、shift-jisで運用しているサイトもあると思います。「Github Desktop」では、shift-jisだと文字化けを起こしたり、意図した動作にならない場合があります。
大きいファイルを扱う場合
大きいサイズのファイル、または大量のファイルをリモートリポジトリに反映するとき、時間がかかったり、通信エラー、タイムアウトエラーが起きやすくなります。
通信環境に依存する部分でもありますが、GBを超えるデータを反映したり、数千のファイルを一気に反映するのはできる限り避けましょう。
ファイル数が多い場合、多少手間となりますが何回かに分けてcommitするとエラーを回避できます。
操作ミスや強制終了よるエラー
大きいファイルをcommitしようとして処理が終わらない、undoの反映前にアプリケーションで別の操作を行った、大きいファイルをリモートリポジトリから取得したときなど アプリケーションがエラーを起こしたり操作不能になる場合があります。
エラーの場合
操作不能の場合、一度強制終了し、アプリケーションを再起動します。
アプリケーションを再起動しても復帰しない
アプリケーションを使用しているパソコンの再起動をしてみましょう。処理途中のものがキャンセルされることで復帰できる場合があります。
パソコンの再起動をしても復帰しない
この場合はローカルリポジトリのデータを一度削除し、再びクローンする必要があります。
・アプリケーションを終了
・ローカルリポジトリファイルをゴミ箱に入れ消去
※削除するときはリポジトリをクローンしたフォルダごと削除
（隠しファイルが残っている場合があるため）
※ゴミ箱に入れたファイルが使用中で消去できない、またはゴミ箱に入らない場合、パソコンを再起動
・再起動後、残ったファイルを消去
削除完了後、アプリケーションを起動し、再びリポジトリをクローンします。
まとめ
いかがでしたでしょうか？
今回はGithubの運用に関して実務的な面からアプローチしていきました。
これらの便利な仕組みも必ずエラーや予期しないことが起こります。
エラーが起きた際、どう対処するか、落ち着いて的確に行わなくてはなりません。
いざ起こったときに慌てないように、こういったパターンを想定しておけば落ち着いて適切な対処ができるはずです。
より円滑に、より快適に開発運用するためにはノウハウを蓄積していくことが大変重要です。
ノウハウを少しずつでもためていき、より良い運用が行えるようにしていきましょう！
