Webに即売会の楽しさを!「サークルスペースメーカー」ができるまで

こんにちはlascaです。僕はpixivマンガチームに所属しています。
pixivマンガチームは、2020年2月にエンジニア 2名、ビジネス職 1名の3人で結成された、新設のチームです。
そんな私たちが先日「サークルスペースメーカー」というツールをリリースいたしまして、その裏側を小規模チームにおけるプロジェクト立案~発表の事例としてご紹介させていただきます。

目次

サークルスペースメーカーとは?

同人誌の通販ページやpixiv投稿作品へのリンク等をまとめて、Web上に仮想の「サークルスペース」を設置できるツールです。
ポスター、敷き布、卓上のアイテムを設置することができ、卓上のアイテムから通販ページや作品ページにリンクされます。

▼サークルスペースメーカー
https://www.pixiv.net/special/circlespacemaker/

f:id:devpixiv:20200527175842p:plain
設置イメージ。

TwitterにシェアすればOGP画像として表示され、タイムラインがイベント会場になるというコンセプトです。

f:id:devpixiv:20200527181009p:plain

コミックマーケットが史上初めて中止に

COVID-19の流行に伴い、様々なリアルイベントが中止になりました。3月末、コミックマーケットも例にもれず中止が決定となり、また同様に予定されていた創作イベントもほとんどが中止となってしまいます。
そこで何かできないか、というところが企画の出発点です。

何をするか、何ができるか

とはいえ私たちも集まって会議をするわけにはいかず、Google JamboardとGoogle Meetを利用して三人で打合せを行いました。
コミケに参加するはずだった人をターゲットとし、人々がコミケに求めている機能は何か、それを叶えられるものは何か、実現性もあわせて議論していきます。
実際に開発に動ける期間が2週間程度だったこともあり、このツールでまず最低限、叶えるべきコトの定義を行いました。

f:id:devpixiv:20200527180617p:plain

f:id:devpixiv:20200527180613p:plain
議論ドキュメントの一部

抜粋すると以下のような議論がありました。

  • 主な利用者はPC版pixivか、モバイル版pixivか?
  • じっくりこだわれるツールにするのか?
  • 簡単に遊べるツールにするのか?
  • 再編集はできるようにするのか?
  • BOOTH以外の外部通販も利用できるようにするか?

検討を重ね、最初にできたラフデザイン案がこちら。

f:id:devpixiv:20200527180925p:plain

最初に三人で決めた内容・共有したビジョンが明確だったので、その後チームの意思疎通はかなりスムーズでした。
4月13日にサービスデザインが凡そ承認されて開発作業に入れることになり、サーバーサイドエンジニア、フロントエンドエンジニア、デザイナー兼プロモーション担当に役割分担して各々動き始めました。

各メンバーのタスク

uchien(サーバサイドエンジニア、プロダクトマネージャ)

  • メンバーのマネジメント
  • ImageMagickを利用したスペース画像の生成・保存周りの実装
  • データベース周りの実装

lasca(サーバーサイド・フロントエンドエンジニア)

  • フロントエンド全般

hoppy(デザイナー、プロモーター、ディレクター)

  • デザイン全般
  • プロモーション関連業務
  • データ分析
  • Q&Aなどの準備
  • 各種資料制作
  • 使い方動画制作

チーム外の皆さんに手伝っていただいた主な業務

  • デザインチェック
  • ロゴ作成
  • 一部開発
  • レビュー
  • セキュリティチェック
    など

と、このような内訳です。
かなり周囲の皆さんに助けてもらいながら、5月2日10時にリリース。
もともと5月1日にリリースとご案内していたのですが、遅れてしまって恐縮です。
ただその分かなり万全を期した準備ができたので、安心してご利用いただけるようにできたとも思っています。
もともとチームメンバー全員が創作イベントに思い入れを持っていたこともあり、サービスの随所に「あるある」感をちりばめてみました。詳しい方はぜひ着目していただけると嬉しいです。

結果

5月2日~5月5日の3日間で10303サークル、13万人以上の方にご利用いただきました。
Twitterトレンドも6位まで上がり、ご利用いただけるのを三人でわくわく見守っていました。
おそらくページには遷移せず、Twitterで見かけられた方も多かったのではないかと思います。サークルスペースをタイムライン見かけてスペースまで遷移し、実際に作者さんの作品ページまでアクセスする人を増やす、というところに課題を感じています。
現状8月31日までの期間限定リリースとさせていただいているのですが、今後のご利用状況によってはサービスをより整備して残していけないか……とも議論中です。
どちらにせよ今回のサービス開発を経て得た課題感や知見を、今後のpixivの開発に生かしていければと思います。

最後に

チームメンバー達の創作イベントに対する強い熱量から生まれた「サークルスペースメーカー」。
創作イベントの楽しさを、様々な参加者さんと共有できたのがとても嬉しかったです。
サークルスペースメーカー、たくさんのご利用ありがとうございました。
ピクシブではエンジニア職、総合職問わず、創作にアツい気持ちがある人を求めています!
ご興味のある方はこちら!

recruit.jobcan.jp

2020's hottest tech, AMP Stories has been implemented on pixiv

The team at pixiv implemented AMP Stories, which was released at the end of 2019. I'd like to provide an overview of pixiv’s implementation of AMP Stories.

日本語版はこちら

About pixiv

pixiv is a service where creators can post their illustrations, manga, and novels. As of September 2019, the website features 85 million works posted by more than 40 million registered users. Recently, registrations from countries other than Japan have increased and now account for about 70% of our new users.

About AMP and AMP Stories

About AMP (Accelerated Mobile Pages)

AMP is a framework created mainly by Google for displaying websites faster. One of the benefits of AMP content is that when users open a link to an AMP page from Google Search results, they are served from the Google AMP cache which makes the page load faster.

About AMP Stories

AMP Stories are story-type content that users can view in full screen. Users can quickly switch pages by tapping within the Story. Moreover, the AMP Stories format is free for everyone to use and can be implemented on any site.

AMP Stories - amp.dev

About pixiv AMP Stories

The many works that are posted on pixiv are tagged with hashtags. We created AMP Stories to display popular weekly illustrations sorted by pixiv hashtag.

You can check the actual AMP Stories from the URL below.
Original weekly popular illustrations (01/04/2020 - 01/11) - pixiv

Moreover, we implemented AMP Stories so that works can reach many users even without an effort by their creators while making the topic of each work clear and straightforward.

Post-release results

  • About 35% of users who browsed AMP Stories opened the illustration work pages
  • About 61% of users who browsed AMP Stories viewed them up to the last page

We believe that we could achieve these results thanks to the many users that took an interest in the AMP Stories we created.

Benefits of implementing AMP Stories

1. AMP Stories can be displayed in Google Discover and Google Search

Under certain conditions, AMP Stories will appear in Google Search results in certain territories, such as the United States. By implementing the English version of AMP Stories, pixiv hopes that pixiv content will be displayed in the United States and other countries. There's a high chance that this aspect of AMP Stories will extend to Japan in the future, so we expect more opportunities to share the works of pixiv users to an even larger audience.

The following article from 2018 covers the benefits of introducing AMP Stories when it comes to Google Search results.

developers.googleblog.com

2. Ready-to-use story development format

There's no need to develop your own format from scratch to bring story-style content to your service. The AMP Stories format and development documentation are already available and ready to use, making it easy for anyone to create story-style content.

3. Monetization

AMP Stories includes a feature called Story Ads, where full-screen ads can be placed in the midst of the story. You can see an example of a story with full-screen ads on the page below.

amp.dev

How to implement AMP Stories

  1. Follow the tutorial and create a trial AMP Story. Make sure to thoroughly read and understand the other online documentation
  2. Choose specifications, design, etc.
  3. Develop
  4. Set up analytics and structured data
  5. Release

Pay close attention to these two aspects of your AMP Story:

  • Setting up analytics and structured data
  • Preparing an internal link in the service that leads to AMP Stories

Documentation for setting up an AMP Story

Tutorial documentation

First, I recommend completing the AMP Stories tutorial. You can get a firm grasp on what AMP Stories really is. This tutorial is available in English and Japanese.

amp.dev

Best practices

This document guides you on how to display text, images, and videos as well as how to use animations. I recommend reading this documentation before you actually begin creating your AMP Stories.

amp.dev

Analytics for AMP Stories

In order to check how many views your Stories are receiving and refine your strategy moving forward, you'll need to set up analytics after you release your AMP Stories.

AMP Stories treats pageviews and events separately when it records viewing information. You can learn more about what events occur by reading Analytics for your AMP Stories – The AMP Blog. There are a lot of diagrams included to make this concept as easy to understand as possible.

blog.amp.dev

amp.dev

Adding structured data and other additions

When you have an AMP and non-AMP version of the same page, you can set them as "canonical" or "amphtml".

Also, you can optimize structured data for search engines for AMP Stories as well. You can evaluate your structured data using structured data testing tools. Check out pixiv AMP Stories structured data tools here. By clicking the preview button, you can see how your Story will be displayed within Google Search results.

amp.dev

developers.google.com

In conclusion

Because AMP Stories load at high speeds in a format optimized for mobile users, their popularity is likely to grow moving forward. By using (MakeStories beta), anyone can easily create their own AMP Stories. Why not give it a try yourself?

If you have any questions, please contact me on any of the links below.

イラストを魅力的に紹介! pixivでAMP Storiesを実装しました

こんにちは!pixivでエンジニアアルバイトをしているshoです。 普段はpixivのフロントエンドを開発をしています。

pixivでは昨年末にAMP Storiesを使ったコンテンツをリリースしました。 AMP Storiesの概要や導入メリットなどは弊社のプロダクトマネージャーが紹介していますが、今回はエンジニア視点で、AMP Storiesの開発で抑えたいポイントの話をしたいと思います。

inside.pixiv.blog

AMPとAMP Storiesについて

AMPとは、モバイルページを高速に表示するためのオープンソースフレームワークです。
通常のHTMLに比べ仕様に制約があったり、AMPページをAMP CacheというCDNによってキャッシュしたりと、ページを高速に描画することに特化しています。 高速表示によってユーザー体験が向上するため、最近だとGoogle検索でも頻繁に表示されるようになりました。

そしてAMP Storiesは、ストーリー形式でコンテンツや記事を配信できるフレームワークです。 閲覧者は好きなタイミングでページを変えることができ、ページ内容も高速に切り替わります。またフルスクリーン表示されるため没入感の高いコンテンツ配信ができます。

制約のあるHTML

AMPは高速表示を実現するために、AMP HTMLというカスタムコンポーネントが提供され、使えるHTMLに制限を設けています。
例えば

  • JavaScriptは基本使用不可
  • CSSは50KB以下でインラインにする

といった制限があります。
逆に言えばこの制約によって、無駄のない高品質なユーザー体験コンテンツが出来るわけですね。

AMP Storiesの構成

構成は以下の様になっていて、1つのストーリーの中に複数ページを用意し、ページの中でレイヤーを分けてコンテンツを配置していく形になります。

f:id:pxvpxv:20200207102406p:plain
引用元:https://amp.dev/documentation/guides-and-tutorials/start/visual_story/parts_of_story/?format=stories

AMP StoriesはAMPと同様Webコンポーネントフレームワークなので、あらかじめコンポーネントが用意されています。
用意されているコンポーネントやHTMLを使って、ページ内のコンテンツを作っていきます。AMP HTMLも通常のHTML同様、classを指定したスタイルの適用なども可能です。

f:id:pxvpxv:20200207102711p:plain
引用元:https://amp.dev/documentation/guides-and-tutorials/start/visual_story/parts_of_story/?format=stories

AMP Stories開発で押さえておきたい7つのポイント

1. まずはベストプラクティスを見る

AMP Storiesは視覚的かつ没入型のストーリー形式で表示されます。魅力的にコンテンツを伝えるためにも、公式のベストプラクティスを見ることをおすすめします。

初めてAMPに触れる方でも、テキストや画像のデザイン、アニメーションの良い例・悪い例などが端的にまとめられています。 amp.dev

2. ランドスケープ表示

AMPはモバイル向けを意識しているので、基本的にポートレート(縦長)表示になります。しかしモバイル端末を横向きにした際や、デスクトップ端末向けにランドスケープ表示をすることもできます。
ランドスケープ表示をする際は、モバイル向けデザインのままか、フルスクリーンで表示するかの2つの選択肢があり、内容コンテンツによって自由に選ぶことができます。

表示の違いはこんな感じです。

f:id:pxvpxv:20200207103758p:plain
Portrait

f:id:pxvpxv:20200207103855p:plain
Landscape

pixivのAMP Storiesではフルスクリーンを用いて、イラストを全画面に表示させています。

この切り替えは、supports-landscape というattributeを加えるだけで変更することができます。 amp.dev

3. 予備のコンテンツを配置

AMPページは高速表示に重点を置いていますが、コンテンツによっては読み込みに時間がかかったり、動作環境によってはファイル形式が対応していない場合もあります。
そのような場合に備えて、AMP Storiesでは予備のコンテンツを配置することができます。

pixivではイラストを用いるため、速度の遅い回線での読み込みに時間がかかる事が想定されました。
そこで予備コンテンツとして軽量なコンテンツを配置しておくことで、読み込みに時間がかかっている際にユーザー体験が損なわれるのをカバーします。

f:id:pxvpxv:20200207104901p:plainf:id:pxvpxv:20200207104942p:plain
左が読み込み中、右が完了後

コードとしては、本来表示させるコンテンツの子要素に、placeholderを指定するだけです。この属性は、AMP HTMLだけでなく通常のHTMLにも適用できます。

<amp-img src=”illust.jpg” 
  layout="fill"   
  animate-in="pan-right">
  <div placeholder>
    <amp-img src="icon.png" 
      placeholder
      layout="fixed" 
      width="80px"
      height="80px">
    </amp-img>
  </div>
</amp-img>

他にもコンテンツの読み込みに関する類似の属性として、fallbacknoloadingなどが用意されています。 ブラウザ依存によるファイル形式の分岐なども行えるので、ぜひ試して見てください。

amp.dev

4. アニメーションの設定

AMP Storiesではより没入感の高いユーザー体験を提供するために、各要素にアニメーションを付けることができます。

<amp-story-page id="fade-in">
  <amp-story-grid-layer template="thirds">
    <h1>fade-in</h1>
    <div class="square"
      animate-in="fade-in"
      animate-in-duration="2s">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

こちらはドキュメントページに掲載されているサンプルコードです。
AMP Storiesではあらかじめプリセットが用意されていて、動きをつけたい要素にanimate-in属性でプリセットを指定するだけで、アニメーション実装することができます。
さらに、アニメーションの間隔や遅延、複数のアニメーションの組み合わせを行うなどのカスタマイズも容易にできます。

amp.dev

さらに、CSSアニメーションを使うことによって独自のアニメーションを設定する事も可能です。ただし使用できるCSSには一部制約があるので、その点には注意しましょう。

amp.dev

pixivでは5秒間隔の横スクロールアニメーションのみを使っています。全てのイラストに対して動きを統一する事で、イラストへの没入感を高めています。
https://i.gyazo.com/fc95b5bb5933acdf146ffb40546daac2.gif

また多様なイラストを綺麗に見せる為に、表示される画面サイズによってイラストの中心点を変えています。
今後、CSSを用いたアニメーションの導入なども検討しています。

5. ポスター画像の設定

AMP Storiesではストーリーをポスター画像を指定することで、Google検索などのポスターとして表示することができます。

f:id:pxvpxv:20200207111356p:plainf:id:pxvpxv:20200207111234p:plain
Google検索やDiscoverの表示例

ポスター画像はカバーページ(最初のページに表示されるコンテンツ)と同じ内容のものを指定します。 この時、使用する画像のURLなどは異なっても良いとの事で、pixivではカバーページの画像をそれぞれのサイズでクロップして配信しています。
なお、カバーページが動画の場合は動画のサムネイルを指定します。

ガイドラインによると縦長・横長・正方形の3種類が指定されていますが、それぞれ用途が異なるとのこと。

  • Portrait:モバイル用に使用(一番使われる)
  • Landscape:デスクトップ向けに使用
  • Square:今後使用される(現状は使われていないらしい)

ポスター画像はAMP Storiesのプレビューやエコシステムに広く利用されていくとの事です。
アスペクト比まで指定されている画像を用意するのは大変ですが、可能な限り用意しておきましょう。

6. Validationを通して最適化

AMPは制約事項が多いので、気づかないうちに制約エラーを出している事も。 有効なAMPページになっていないと、Googleなどの検索結果に表示されなかったり、キャッシュしてくれなかったりします。

これを検証するために、AMPのバリデーターが利用できます。 バリデーションに通っていることで、有効なAMPページであることが保証され、Google AMP cacheなどにキャッシュされるようになります。
必ずバリデーションを通して、有効なAMPページであることを確認しましょう。

バリデーション方法は

  • ブラウザコンソール
  • Webインターフェース
  • ブラウザ拡張機能
  • コマンドラインツール

など色々ありますので、環境に合わせて選びましょう。

それぞれの使い方は、ドキュメントページに詳しく書かれています。 amp.dev

7. Analyticsを設定

AMP Storiesでは、ユーザーがページ内のリンクを踏んだか、最後のページまで閲覧したかなどのアナリティクスを簡単に設定することができます。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
    "vars": {
        "gtag_id": "YOUR_GOOGLE_ANALYTICS_ID",
        "config": {
            "YOUR_GOOGLE_ANALYTICS_ID": {
                "groups": "default"
            }
        }
    },
    "triggers": {
        "storyPageVisible": {
            "on": "story-page-visible",
            "vars": {
                "event_name": "amp_stories",
                "event_category": "story_progress",
                "event_action": "${title}",
                "event_label": "${storyPageId}"
            }
        },
        "clickViewDetail": {
            "on": "click",
            "selector": "a",
            "vars": {
                "event_name": "amp_stories",
                "event_category": "click_view_details",
                "event_action": "${title}",
                "event_label": "view_illustration_details_${storyPageId}"
            }
        },
        "storyEnd": {
            "on": "story-last-page-visible",
            "vars": {
                "event_name": "amp_stories",
                "event_category": "story_complete",
                "event_action": "${title}",
                "event_label": "bookend"
            }
        }
    }
}
</script>
</amp-analytics>

AMPでは様々な環境変数が定義されています。例えば ${storyPageId} は、表示されているページ(<amp-story-page>)に設定されているIDを参照できます。それによって、閲覧者がどのページを閲覧し、どのようなイベントを起こしたかなどを追跡することができます。

pixivのAMP Storiesでは、各イラストページに作品詳細画面へのリンクボタンが設置されています。 selectorを指定する事で、通常のWebページ同様に要素ごとのイベント情報も取得可能です。 リンクボタンのイベントを検知する事で、閲覧ユーザのpixivへの導入率やページ数などの情報を記録しています。

AMP Storiesでのアナリティクスは、こちらの記事で詳しく解説されています。 blog.amp.dev

また使用できる変数などは、こちらにまとめられていました。

github.com

その他

各コンポーネントの使い方は、ドキュメントページで詳しく説明されています。

amp.dev

まとめ

AMPは初めて触れたのですが、書き慣れたはずのHTMLなのに!と思う事も多々ありました。 一方でAMPのコードはパフォーマンスやキャッシュの容易さに重点を置いているので、無駄を省く事でここまで簡素化される事に驚きました。

ちょうどこの記事を書いている間にも、AMPの公式ページが更新されていました。 Githubの活発さからも、AMP Stories含めAMPは今まさに成長中!というのを感じます。

一方で制作にあたり何度かAMP Storiesを検索しましたが、技術的な記事はあまり多くなく、特に日本の方の記事は数える程度でした。 まだまだ導入例は多くない印象を受けたので、AMP Storiesを導入する際にこの記事が少しでも役に立てば嬉しいです。


ピクシブでは通年で新卒採用・長期アルバイトの募集をしています。
AMPなどの新しい技術に挑戦したい方の応募をお待ちしております!

21新卒募集要項:エンジニア職 / ビジネス職 / Wantedly / アルバイト

2020年注目の技術、AMP Storiesをpixivに実装しました

pixivでプロダクトマネージャーをしているmu-koです。 pixivでAMP Storiesを作成し、2019年末にリリースしました。今回はAMP Storiesの概要をご紹介します。
開発者向けの記事は別途公開予定です。

Click here for English version.

pixivとは

f:id:pxvpxv:20200115190040p:plain

pixivはクリエイターがイラスト・マンガ・小説を投稿し、声援をもらうことができるサービスです。 2019年9月時点で登録ユーザーは4,000万ユーザーを超え、投稿作品数は8,500万作品あります。また、最近は日本以外の国からの登録が増え、今では約70%を占めています。

AMPやAMP Storiesについて

AMP(Accelerated Mobile Pages)とは

AMPとは、Googleが中心となって作られた、ウェブサイトを高速に表示するためのフレームワークです。 AMPコンテンツのメリットを1つご紹介します。AMPコンテンツがGoogle検索結果に表示されてユーザーがリンクをタップした場合、Google AMPキャッシュからページが取得されるため、ページが高速に読み込まれやすくなります。

AMP Storiesとは

AMP Storiesとはユーザーが全画面で閲覧を楽しめるストーリー形式のコンテンツです。ユーザーはStories内でタップすることでページ内容を高速に切り替えられます。 また、AMP Storiesのフォーマットはどなたでも利用できるように無料で公開され、どのサイトでも導入できます。

以下のページでAMP Storiesの詳細が紹介されています。
AMP Stories - amp.dev

pixivのAMP Storiesについて

pixivには様々な作品が投稿され、これらの作品にはハッシュタグが付けられています。 そこで、pixivのハッシュタグごとの週間人気イラストを表示するAMP Storiesを作成しました。

実際のAMP Storiesは以下のURLから確認できます。
オリジナル 週間人気イラスト (2020/01/04 ~ 01/11) - pixiv

また、クリエイターの方々が意識しなくても作品が多くのユーザーに届くことや、作品の主題がAMP Stories上でしっかりと伝わることを考えて作成しました。 AMP Storiesの担当デザイナーの発表資料もありますので、ご興味のある方はぜひご覧ください。

リリース後の結果

  • AMP Storiesを閲覧したユーザーのうち約35%がイラスト作品画面へ遷移
  • AMP Storiesを閲覧したユーザーのうち約61%が最後のページまで閲覧

多くのユーザーが今回作成したAMP Storiesに興味を持ったことで、今回の結果が出たと考えています。

AMP Stories導入のメリット

1. Google DiscoverやGoogle検索にAMP Storiesが表示される可能性があること
米国など一部の地域では特定条件下でAMP StoriesがGoogle検索上に表示されます。pixivでは英語版のAMP Storiesを用意することで、米国などでpixivのコンテンツが表示されることを期待しています。 また、今後は日本にも横展開される可能性が高いと考えられます。そのため、pixivユーザーの作品をより多くの方に届けるチャンスが増えることを期待できます。

2018年の記事になりますが、以下の記事でGoogle検索時におけるAMP Stories導入のメリットについて説明されています。 developers-jp.googleblog.com

2. ストーリー開発のフォーマットが整っていること
ストーリー形式のコンテンツをサービスに導入するために自社で1から開発する必要がありません。 すでにAMP Storiesのフォーマットや開発ドキュメントが用意されているため、どなたでもストーリー形式のコンテンツを作成しやすい環境が整っています。
また、AMPには1,000人を超えるコントリビューターがいて、フォーマットがアップデートされていくメリットがあります。

3. マネタイズ可能であること
AMP StoriesにはStory Adsというものが用意されていて、ストーリーの途中で全画面広告を設置できます。
以下のページで全画面広告入りのストーリーの例を見れます。

amp.dev

AMP Stories導入の流れ

  1. チュートリアルを参考にAMP Storiesを試しに作成したり、その他の記事を読んで内容理解
  2. 仕様やデザインの決定
  3. 開発
  4. アナリティクスや構造化データの設定
  5. リリース

注意点としては以下の2つがあります。

  • 「アナリティクスや構造化データの設定を行うこと」
  • 「サービス内にAMP Storiesへの内部リンクを用意すること」

AMP Stories導入で参考にした記事

チュートリアル記事

まず、AMP Storiesのチュートリアル記事をおすすめします。 AMP Storiesがどういうものかをざっくり把握することができます。 また、チュートリアルはすでに日本語翻訳されていますので、日本語で記事を読むこともできます。

amp.dev

ベストプラクティス

テキストや画像・動画の表示方法、アニメーションの使い方の良い例と悪い例が紹介されています。 実際にAMP Storiesを作る前にこの記事を読むことをおすすめします。

amp.dev

アナリティクスの設定方法

AMP Storiesを公開した後、どのように閲覧されているかを確認し、次の改善案を考えるためにアナリティクスを設定する必要があります。

AMP Storiesではページビューとイベントを使い分け、閲覧情報を記録します。 特にAnalytics for your AMP Stories – The AMP Blogはいつイベントを飛ばすかの参考になりました。図解もされていて非常に分かりやすい記事になっています。

blog.amp.dev

amp.dev

構造化データなどの追加

同じ内容でAMPページと非AMPページが存在する場合はcanonicalやamphtmlを設定します。

また、AMP Storiesでも検索エンジン向けに構造化データを設定できます。 構造化データは構造化データテストツールから確認できます。pixivのAMP Storiesの構造化データはこちらから見れますので、ぜひ確認してみてください。プレビューボタンをクリックすることで、Google検索上でどのように表示されるかを確認できます。

amp.dev

記事についての構造化データ - Google Developers developers.google.com

その他

開発者向けになりますが、各コンポーネントの詳細は以下のドキュメントから確認できます。

amp.dev

最後に

AMP Storiesはモバイルユーザーに最適化された表示形式でページを高速に切り替えることもでき、さらに多くのサイトで利用される可能性があると思います。 AMP Storiesを簡単に作れるサービス(MakeStories beta)も出てきていますので、ぜひ1度AMP Storiesを作って体験してみてください。

何かご質問がありましたら、以下のサービスからご連絡お願いします。

採用情報

www.wantedly.com

イラスト投稿サイトと思われがちなpixivですが、小説チームができました

 物語が始まるのは、いつだって突然だ。 2017年の秋ごろだったと思う。人事に「risari、今ちょっと時間良い?」と声をかけられて入った会議室には、取締役から役員陣までずらっと勢ぞろいしていた。一体どんな悪いことをしてしまったのかと突然雪の中に放り出された亀のように縮こまった私は、予想もしていなかった言葉に呆けてしまった。 「小説の部署を作ろうと思うんだよね」その頃の私はpixivコミックというマンガサービスの部署で、出版社と掲載に関するやりとりをしたり、マンガコンテストを開催したりしていた。 それにしても、何で私に? 確かに前職が小説編集だったという理由からか、小説関連のサービスも担当するようになってから、弊社の小説機能への向き合い方や開発態勢には文句を言っていたこともあるが。(なんたって小説機能ができてから8年、ほとんど手が入れられていなかったので!) 正直、荷が重い、と思った。 同時に、今を逃したらpixivで小説を頑張るのは難しくなるんじゃないか、とも。 pixivの小説は絶対にもっと良くできるのは間違いない。文字を愛する者として、人生の一部を小説という人間の基本的な創作に捧げられるのなら光栄なことだと思う。 密室で多数の視線に囲まれる居心地の悪さも相まって、お茶を一口飲むぐらいの逡巡の後、「やります」と頷いた。こんな明確に言ったかどうかは覚えていないけれど。 今思えば持ち帰っても良かったかもしれない。いや、よくないかな。人生、勢いが必要なこともある。

 そうして生まれた小説プロジェクトは、初めは私とエンジニア1名で始まった。 ピクシブの関連サービスはいくつもあるけれど、それぞれに独自の開発路線を歩んでいるところも多く、私と彼はpixivに関わるのが初めてだった。初期の頃は慣れるために、小説以外の機能の修正や開発を手伝ったりしていたような記憶がある。 それから数か月して、メンバーを徐々に増やしていって。プロジェクト発足から2年を迎えようという今、両手を足して丁度の人数になった。 人が増やせるということは、会社が小説をちゃんと重要だと思っている証拠でもあるので大変喜ばしい。メンバーの多くが何かしら創作活動をしていることも自慢。百合文芸小説コンテストに作品を応募してるな~と思って投稿時間を見たら朝の5時だった時は、ちょっと心配しちゃったけど。本当に尊敬できる人たちばかりで、メンバー自慢してって言われたら何時間でも話せる自信がある。このチームで働けるだけでも、あの日頷いて良かったなと思っているぐらい。

f:id:pxv:20200128191502p:plain
小説チームメンバー(2020.1月現在)

 そういえば、小説プロジェクトから小説チームと呼ぶようになったのはいつだったかな。誰かが「小説チーム」と言い出して、何だかすごく良いなぁと思って、それ以来プロジェクトじゃなくてチームと言うようになった。 始まったころはチームとして未熟で、進め方から考え方から何からたくさんの部署に怒られて。新しい機能開発なんて夢のまた夢で、エンジニアは古いコードの掃除に奔走していた。 それでも少しずつ、小説の変化を目に見える形で伝えられるようになって。Twitterカードの表示を変更した時は、たくさんのユーザーさんが自分の作品をTwitterで紹介しているタイムラインを見て「やってよかったねー!」と皆で喜んだ。

f:id:pxv:20200128195017p:plain
新しくなったシェア画像
   先月チームでこれまでの振り返りと今後の棚卸をしたのだけど、どんどん密度があがっているのが目に見えて分かって嬉しい。特にここ半年は1ヶ月1リリースを目標にしていたから、お知らせもたくさんできた。

f:id:pxv:20200128191510p:plain
pixiv小説チームができてからのやったこと年表

 目の前のユーザーさんの声も聞きたいな、という話をして昨年の10月にはpixiv小説編集部のTwitterアカウント(@pixiv_shosetsu)も開設した。 人が足りないって言うのは恥ずかしいなぁと思いつつ、採用についてもツイートさせてもらって、おかげさまで今月から1名新しいメンバーも入った。 今回ご縁が繋げなかった方も、お話しした方たちは皆pixivの小説を良くしようと考えてくださっていて、本当にありがたい。

 2017年に作った「小説プロジェクトやりたいことリスト」はまだ5%くらいしか埋まっていなくて焦ることもあるけど、着実に前に進んでいる……はず。 鉛筆でもキーボードでも、手を動かせばそこに文章が生まれるように、形にしていくには動くしかないので。

 そんなこんなで、pixivの小説機能は今年の7月で10周年を迎える。 pixivを作品の投稿場所に選んでくれたユーザーさんが喜んでくれて。 pixivに掲載された作品がたくさん読まれて、色んな形で世の中に広がっていくように。 メンバー全員で勇往邁進しますので、これからのpixiv小説チームを見守っていただけたら嬉しいです。 あとやっぱり人が足りていないので、興味がある方、ぜひ一度ご連絡ください。

pixivの小説に関する最新情報を発信!→ pixiv小説編集部Twitter twitter.com

優秀作は表紙イラスト描き下ろしでpixivノベルに掲載!→ pixivノベルコンテスト~2019winter~ www.pixiv.net

日本の創作文化を世界のナンバーワンに押し上げる、ピクシブの新体制

ピクシブはこれまで一貫して「クリエイターさん個人の活動」に注目し、事業作りを行ってきました。それは「創作活動がもっと楽しくなる場所をつくる」という、ピクシブの企業理念の”主語”にも強く表れています。

今年で公開13年目となるイラストコミュニケーションサービス「pixiv」は、ローンチ後の早い時期から出版社様とのアライアンス活動をすすめ、公式としてファンアートやプロデビューを後押しする企画を進めてきました。2013年からは、ファンへの作品販売や、支援を受け取るためのプラットフォーム運営にも事業を拡大しています。ピクシブが運営する10を超えるプロダクトのすべてが、企業理念に矛盾ないコンセプトで機能しています。

ここ数年は、クリエイターさんの活動の場をさらに拡大すべく、海外展開の強化にも力を入れてきました。しかし、多くの問題は片手間で解決できるほど簡単ではありません。

「ブランドアクティベーション室」は、海外に特化してピクシブが運営するプロダクトの価値を最大化する専門集団として、2019年10月に編成されました。私、川田(@_furoshiki)は同チームのマネージャーを担当しています。

ピクシブが事業の海外展開を難しくする3つの壁

日本のサブカルチャーは世界中の人たちに愛され、ハリウッド映画さえも凌駕する勢いで成長を続けています。ピクシブのプロダクトを通じて公開されるイラストやマンガなどの作品は、海を超え、東アジア諸国のファンを巻き込む流行をつくっています。

また、海外のクリエイターさんによるpixivの活用も進んでいます。pixivでは、日本のイラストと見間違えるような作風の作品が、韓国・台湾・シンガポールなど日本以外の地域からも多く投稿されています。

現在、ピクシブのプロダクトに共通利用しているアカウントシステムにおいて、新規登録者の約63.5%は日本以外からのアクセスです。もはや完全なグローバルプラットフォームといえますが、海外におけるプロダクトの価値はまだ十分に引き出せているとは言えません。

実際に以下、3つの障壁をクリアすることが求められており、私たちが主導し解決に当たっています。

1. 市場の壁

海外では、ゲーム・マンガに関わる業界の仕組みは日本と異なり、クリエイターさんの活動内容もまた大きく異なります。

東南アジアの多くの国は市場が未発達で、イラストレーターや漫画家などのプロになる手段も少ないため、自国以外に仕事を得る機会を求めます。英語や日本語を学び、グローバルに活動できるSNSを通じて自身をプロモーションする傾向にあります。

一方、北アメリカでは、日本のアニメ調イラストのニーズがインディーに偏る環境にあり、個人での活動も盛んです。日本の少年漫画のみならず、アメコミヒーローが子どもたちを熱狂させ、サブカルチャーとは異なる巨大な創作文化を築いています。

このような環境の差異を認識し、ピクシブが提供できる価値を最適化して提供することが求められています。また、プロダクトのブランド改善も求められます。

2. 言語・文化の壁

創作表現を意味する概念やサブカルチャー由来の用語は、国の文化やローカルコミュニティの影響を強く受けます。これが、国や所属コミュニティ間において、言葉やニュアンスを正確に伝えることを難しくします。

例えば、「ファンアート(Fanarts)」という言葉は、日本だと多くの人々にアニメ調のイラストをイメージさせますが、USではアメリカンコミックなどの幅広いジャンルをカバーするため、大きく乖離したイメージを抱かせることがあります。日本語と中国語の言語による違いがコミュニティに断絶をつくり、中華圏だけに存在する独特な言い回しのサブカルチャー用語が生まれることもあります。

こうした違いを乗り越え、クリエイターさんの作品がそれを求める人たちの元へと届くよう、プロダクトやコンテンツをローカライズしていくことが求められています。

3. 法制度・決済の壁

訴訟社会のアメリカでは、常に法制度に関わるリスクがつきまといます。それは作品の表現内容に踏み込んだものも含みます。世界のどこにいても、クリエイターさんとファンとの間で作品の権利が守られつつ、人々が安心・安全に作品を楽しめるように、ピクシブがこの問題に取り組まなくてはいけません。

ピクシブの多くのプラットフォームが扱うデジタルコンテンツは、流通を容易にする一方で、各国に依存した決済手段や税制が支払いに制約を作ります。国によっては、クレジットカードがまったく普及していなかったり、ローカルな支払手段に制限されます。またデジタルコンテンツによるクロスボーダー取引は、通常とは異なる税制が適用されます。

世界に日本の創作文化を広げる

私たちブランドアクティベーション室は、現在まだ10人もいない少数のチームです。マーケティング、ブランディング、リーガルマネジメント、ローカライズなど、さまざまな専門性を集約し、社内のプロダクトが抱える海外展開の障壁に対処しています。

海外専門のチームということもあり、国籍も得意言語も住んでる国も、考え方や価値観も、すべてにおいて多様なメンバーが集っています。しかし皆、創作活動を愛していて、クリエイターさんに深い敬意を持っているという点は共通しています。

「世界の創作文化に影響する、誇れる仕事をしたい」「自国と日本の作家さんと繋いで作品を生み出したい」「アメリカにもサブカルチャーアーティストの活動の場つくりたい」と、メンバーそれぞれが創作文化の中に叶えたい夢を描き、日本のピクシブという場所でそれを実現しようとしています。

We are hiring!

ピクシブでは、ビジネス開発に高い専門性を持つグローバル人材を募集しています。

私たちのチームへジョインすれば、日本語・英語・中国語などの様々な言語の処理能力向上が見込め、また海外サブカル市場の普遍的知識が得られます。業界として過渡期の今を乗り越えれば、市場価値の高いユニークな人材に化けると感じています。ピクシブから、世界中のサブカルチャーを革新的に変える優れた人材を排出するのが、マネージャーである私の夢であり野望でもあります……!

また、日本に留学中の大学生(特にアメリカや東アジア出身でローカルな知見をお持ちの方)を、アルバイトとして採用しています。国籍は一切問いません。pixivというプロダクトのことを知らなくても、海外に点在するファン主導アニメサイトに一度でもハマった経験があれば、私たちの活動に多くの示唆が得られます。多くのことが行えなくても、まずは翻訳の仕事から始めて、少しずつ学びながらステップアップしていきましょう。

www.pixiv.co.jp

互いに切磋琢磨しながら、日本の優れた創作文化を世界のナンバーワンへと押し上げる、野心的なチームを共に作っていければと思います。ご応募、お待ちしております。

pixivに脆弱なパスワードで登録できないようにしました

f:id:pxvpxv:20200120162946p:plain
図1: 脆弱なパスワードを入力した場合のエラー画面

こんにちは、pixiv開発支援チームのmipsparcです。

パスワード、もしかして使いまわしていますか? 複数のサービスで同じパスワードを利用していると、「パスワードリスト型攻撃」によって不正アクセスの被害を受けてしまうかもしれません。 パスワードリスト型攻撃の被害にあわないためには、ブラウザやパスワード管理ツールで自動生成された安全なパスワードを利用するのが好ましいです。

しかし、実際には多くの人が「使いまわしたパスワード」や「簡単なパスワード」(以下、脆弱なパスワード)を利用していますし、啓蒙活動にも限界があります。 pixivではサイバー攻撃への対策を複数とっていますが、根本的な対策のひとつとして、脆弱なパスワードを新しく設定できないようにしました。

脆弱なパスワードの判定方法

脆弱なパスワードの利用はどのように防ぐことができるでしょうか?

好ましくない方法としては、「英数字、大文字小文字記号すべてを含む」といった制限を設ける方法があります。しかし、これではパスワードの使い回しの防止にはなりません。また、仕方なくパスワードの末尾に「1」などをつけてこの制限を回避してしまうユーザーもいるでしょう。 ほかの一般的な方法としては、辞書に載っている単語やキー配置などから推測できる単語のリストを作成して制限することがあると思います。こちらは簡単なパスワードを防止するのには有効な方法ですが、パスワードの使い回しの防止にはなりませんし、リストを網羅的に作成するのは困難でしょう。

今回は先進的な取り組みとして、過去に他のサービスで漏洩済みとして公開されている、ハッシュ化*1された漏洩パスワードのリストを使用しました。この方法は、実際にユーザーに使われている「生きた」パスワードのリストなので、網羅性がある点で優れています。また、1人が複数サービスで使いまわしているパスワードなども掲載されているため、使い回しの防止にもなります。

ハッシュ化された漏洩パスワードのリストは「Have I Been Pwned」(以下HIBP)というサービスによりセキュリティの向上のために非営利で提供されています。

haveibeenpwned.com

漏洩パスワードを保有することについての違法性については、不正アクセス禁止法(不正アクセス行為の禁止等に関する法律)第6条に「何人も、不正アクセス行為の用に供する目的で、不正に取得されたアクセス制御機能に係る他人の識別符号を保管してはならない。」とあり、安全確保目的でパスワードを保持することに問題はないと解釈できます。

HIBPから提供されているハッシュ化された漏洩パスワードのリストには、パスワードのSHA-1ハッシュ値と、そのパスワードが過去に漏洩した回数が含まれています。回数が多いほどより一般的で単純なパスワードだという指標になります。以下にその例を示します。

C7A4D890AC7326FA165E590249D32C46498F49B1 : 23547453回
7F3CCBD108E84037A2FD769956CC3CC47AEA4314 : 7799814回
1B3B77A3500CDE106787A7F45147FF00577F25E1 : 3912816回
B5AA164E9C9BF3F3602852B0C68F33B1E76EF88D : 3730471回
D3F4B20FD71CEB832BC06D4E96941A70F1D9E0D3 : 3120735回
C722F22B29D728A82FF29512438E39420836C7D0 : 2938594回

ハッシュ値を漏洩した回数とともにデータベースに格納することで、漏洩回数が多いパスワードから段階的に使用できなくすることができます。なお、執筆時最新のバージョン5では5億5千万件程度のハッシュ値が含まれており、情報量が大きいので取り扱いには注意が必要です。pixivでは運用との兼ね合いから、一定の漏洩回数以上のパスワードのみをデータベースに格納しています。

先行事例

PythonのソフトウェアリポジトリサービスのPyPIでは、すでにHIBPを利用して漏洩したパスワードを使用しているユーザーに告知するセキュリティ対策を行っています。

また、Google パスワード マネージャーにも、保存されたパスワードが不正利用されていないかを確認する機能があり、同様に漏洩したパスワードを活用しています。

この取り組みの根拠

NIST(アメリカ国立標準技術研究所)は、文書SP 800-63B「Digital Identity Guidelines: Authentication and Lifecycle Management」内の「5.1.1.2 Memorized Secret Verifiers」(いわゆるパスワードに相当する)について、以下の見解を示しています。(原文から翻訳・要約)

  • 過去の漏洩事案により入手したパスワード
  • 辞書にある単語
  • 繰り返したり順番になっている文字列(aaaaaa1234abcdなど)
  • サービス名やユーザー名など、推測可能な単語

などに入力されたパスワードが合致した場合は拒絶して、その理由を伝えるものとする。

漏洩パスワードを設定できなくする本施策はこの見解に沿うものです。なお、「辞書にある単語」や「繰り返したり順番になっている単語」もその多くが漏洩パスワードに含まれているため、別途追加することはしていません。

今後の展望

新規設定だけでなく、すでにご利用いただいている方についても脆弱なパスワードを順次変更いただく取り組みを進めていきたいと考えています。 さらに、FIDOや多要素認証といったパスワードに頼らない認証方法によるセキュリティ強化についても対応していく計画です。

参考リンク

*1:ハッシュ化: 逆関数の計算が困難な関数「ハッシュ関数」によりもとのパスワードへの復元が困難な状態にすること。