mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Apple IPv6審査対応 NAT64/DNS64環境構築について

こんにちは、arukasaです。

今回IPv6 (NAT64/DNS64) のWi-Fi環境構築という貴重な経験をしましたので、情報共有を兼ねて寄稿させて頂きます。

背景

Appleが、2016年1月以降はIPv6環境で動作しないアプリはリジェクトすると宣言しましたので、ミクシィ社内でもその検証環境が必要になりました。

現時点ではApple側も回線から上位はv4想定のようなので、検証環境もそれに倣いLAN側はIPv6、WAN側はIPv4の構成を取りました。

構成

f:id:mixi_engineers:20160106210856p:plain

ネットワーク

  • uplinkはIPv4 only
  • クライアントはIPv6 only
  • サーバとASA間のみv4&v6 併用

機器構成

  • ASA 5505 ( NAT64 )
  • Raspberry Pi
    • DNS64 (unbound 1.5以降)
    • RA (radvd)
  • Aruba (Wi-Fi)

実は構成が確定するまでが一番苦労した部分で、当初導入予定だったDHCPv6 (isc-dhcp-server)やASAでのRA送出、BINDには色々な制限が有り、期待した機能を満たしていない事が動かしてみて初めてわかりました。この辺りの経緯は最後の【ハマったこと】に纏めています。宜しければご参照ください。

※ 以下に記述する手順はインターネット上の情報を多数参考にしています。
※ 環境の違いによって意図しない動作をする可能性も有ります、ご了承ください。
※ 間違い・改善出来る部分など多々あるかと思いますのでご指摘頂けると非常に有りがたいです。

以下configです。

ASA

まずASAから設定します。

先述の通りRAのやり取りはRaspberry piのradvdで行いますので、必要最小限のアドレス設定と、NAT64の設定です。RAの送出も抑止しています。

outsideはキャリアのDHCPサーバーからグローバルのIPv4アドレスを受け取っています。

IP設定

interface Vlan214
nameif inside02
security-level 0
ip address 10.10.214.1
ipv6 address face::10:10:214:1/64
ipv6 enable
ipv6 nd prefix face::/64 no-autoconfig
ipv6 nd suppress-ra 0 

interface Vlan2999
nameif outside01
security-level 0
ip address dhcp setroute

NAT64

IPv6をoutsideのIPv4アドレスにNAT64しています。 またRaspberry PiがIPv4でDNSを聞きに行く為、IPv4アドレスもNATします。

object network REAL_IPv6
 subnet face::/64
object network REAL_IPv4
 subnet 10.10.214.0 255.255.255.0
object network DNS64_range
 subnet cafe:ff9b::/96

nat (inside02,outside01) source dynamic REAL_IPv6 interface destination static DNS64_range any
nat (inside02,outside01) source dynamic REAL_IPv4 interface

ASAは以上です。あとは必要なセキュリティの設定と、物理インターフェースに各interface Vlanを割り当てます。

Raspberry Pi

unbound

unboundは1.5以降のバージョンからDNS64対応ですが、apt-getでは1.4系のパッケージしか無いため、ソースコードからインストールが必要です。ただし必要なパッケージが無いと多大な時間を浪費する事になります (当方はここでハマりました)。

raspberry-piの場合はlibssl-develが必須のようです。

他の手順は以下を参考にしました。

 

unbound.conf

server:
verbosity: 1
pidfile: "/var/run/unbound.pid"
use-syslog: yes
module-config: "dns64 iterator"
dns64-prefix: cafe:ff9b::/96
dns64-synthall: yes
interface: ::1
interface: face::10:10:214:235
access-control: ::0/0 allow 

forward-zone:
name: "."
forward-addr: 8.8.8.8
  • dns64-synthall: yesで、すべての問い合わせをDNS64変換するという実装になります。これをしないと、問い合わせた外部サイトがv6アドレスを持っていた場合、cafe:ff9bではなく生v6アドレスをクライアントに返してしまいます。BINDではここの実装がクリアできず、unboundに変更しました。
  • IPv6への移行という観点から言うとAAAAで接続出来るサイトにはv6通信出来た方が良いのかもしれませんが、今回はApple推奨環境と同様の動作をする環境構築が目的なので、あえてunboundを採用しています。
  • prefixをcafe:ff9b::/64にしているのは、ASAがwell-known-prefixを指定してNATできない仕様のためです。

以上でunboundは動作すると思います。

次はradvdでクライアントへIPv6アドレス、DNSサーバー、デフォルトゲートウェイを通知します。

radvd

こちらもapt-getできるバージョンが古い為、念のためソースから最新版をビルドします。以下を参考にしました。

Cross Compiling Radvd for ARM - BeyondLogic

radvd.conf

interface eth1 {
AdvSendAdvert on;
IgnoreIfMissing on;
MinRtrAdvInterval 3;
MaxRtrAdvInterval 10;
AdvDefaultPreference high;
AdvHomeAgentFlag on;

#フラグの設定

AdvManagedFlag off;
AdvOtherConfigFlag off;

prefix face::/64
{
AdvOnLink on;
AdvAutonomous on;
AdvRouterAddr off;
};

#DNSの通知

RDNSS face::10:10:214:235
{
AdvRDNSSPreference 8;
AdvRDNSSOpen off;
AdvRDNSSLifetime 30;
};
};
  • Raspberry PiのデフォルトゲートウェイはASAに向けてください。
  • ここで設定したフラグの値でクライアントはRAを参照するのかDHCPを参照するのかが決定されます。今回の場合は全てRAを参照させたいので、M flagとO flagを共にOFFにします。
    ただし先述の通り、この設定によりWindowsに自動設定させる事はできなくなりますので、Windows側でオープンソースのアドオンを入れるか、DNSサーバーの情報は手動設定してください。
    rdnssd-win32 download | SourceForge.net
  • iPhoneやAndroidを繋がず、Windows PCやMacだけで良い場合はOフラグをonにし、isc-dhcp-serverでDNSを通知すれば自動接続出来るようになります。 

Raspberry Piは以上です。

Aruba

今回ASAからArubaまで全て同一VLANのL2構成での使用の為、IPv4と比べて特別な設定は必要ありませんでしたが、いくつか注意が有ります。

  • ipv6 enable
    この設定が入っていないと無線側がL2構成であってもIPv6のFirewall Processが働かず、正常に通信出来ません。
  • Valid user (ACL)
    ここがホワイトリストのような役割を果たしており、導入したOSバージョンによっては一定の制限が掛かっています。通信させたいセグメントを許可するように設定変更してください。
  • RA-Guard
    クライアント側から意図しないRAが発せられた時に、それをブロックします。アクセスリストに以下の記述を組み込んでください。
    ip access-list session ra-guard
        ipv6 user any icmpv6 rtr-adv deny

あとはIPv4と同じようにSS-IDを作成すれば接続できるはずです。

 

これで以上です。以下は苦労した点やハマった点などを記載します。

ハマった事

NAT絡み

  • NAT64が上手くいかない → source addressだけでなくdestの改変も必要だった。
  • well-known-prefixをDNSマッピングに指定していたがASAではNATに指定できない仕様だった

DHCPv6(isc-dhcp-server)やRA絡み

  • ASAでDHCPさせようとしたが、そもそもDHCPv6対応していない(ipv6 dhcp relayのみ対応)
    → dhcpをrelayしてRasperry PiにDHCPv6させようとする(当初raspberry piとクライアントは別セグメントだった為)
    → isc-dhcp-serverがIPv6で起動できない
    → v6起動のオプションが必要
    sudo vi /etc/init.d/isc-dhcp-server
    OPTIONS="-6"
    → 起動したものの、Androidだけ接続出来ない
    → 調べるとIPv6アドレスは取れているが、v6のDNS情報が通知出来ていない様子
    → AndroidはDHCPv6非対応の為、RAでDNSサーバー情報を渡さなければならない
    Comparison of IPv6 support in operating systems - Wikipedia, the free encyclopedia
    → RAでDNS情報を通知する為にはRFC6106をサポートした製品が必要になり、まだ多くのネットワーク製品がサポートしていない。
    インターネット用語1分解説~RA (Router Advertisement; ルータ広告)とは~ - JPNIC
    Firewall IPv6 Capabilities: Cisco, Forti, Juniper, Palo
    → 今回はアドレス情報やDNS情報のやり取りはASAではなくRaspberry Piのradvdに任せて、ASAは出口のNAT専用機とする事に変更。

DNS絡み (BINDの問題)

  • 問い合わせた結果AAAAで返ってきたアドレスはDNS64変換されず生のAAAAレコードをクライアントに返してしまう
  • ASAのNATでDNS64レンジを宛先に指定する必要があるためNG
  • unboundなら "dns64-synthall" というオプションがあるようなのでunboundに変更

無線絡み

  1. L2構成の場合ArubaのコントローラにIPv6アドレスを振らない為、IPv6を有効にする必要が無いと勘違いしていた。
  2. IPv6 enableを設定しないとFirewall(v6)も動作しない事を知らなかった。
  3. 運用中の実機のため、迂闊にIPv6 enableなどの設定変更が行えなかった。
  4. IPv6 enableを投入したものの、未だにACLに引っ掛かり通信出来ない
  5. valid userの設定変更が必要だと気づく

機器の実装の違い (最大の難関)

  • WindowsはDNS情報の通知にDHCPv6を使用しなければならないが、
  • AndroidはRAを使用しなければならない。
  • iPhoneはどちらでも構わないが、RAのやり取りが不安定で接続出来たり出来なかったりする。

以下まとめです。

  • Windows
    • RA(IP取得): OK
    • RA(DNS取得): NG (wikipediaより, 上記アドオンインストールで取得出来るようになるようです)
    • DHCPv6(DNS取得): OK
    • v6手動設定: OK
  • Android
    • RA(IP): OK
    • RA(DNS): OK
    • DHCPv6(DNS): NG
    • v6手動設定: 不可
  • iPhone (Mac OS X)
    • RA(IP): OK
    • RA(DNS): OK
    • DHCPv6(RA): OK
    • v6手動設定(DNSのみ): OK

上記よりWindows側が手動やアドオンなど頑張れる要素が多い事と、Appleの推奨環境もそういった構成を取っている為、それに倣いました。

情報の不足

海外サイト、国内サイトを含めて中々必要な情報が得られない状態でした。特に国内のサイトには一通りの情報をまとめているサイトが数える程しか無く、情報収集に苦労しました。

まとめ

Android・iOS・Windowsなどデバイス、OSによってサポート、非サポートな部分の違いが多数有る事がわかりました。本構成ではWindowsの標準機能でDNSサーバーを渡す事が出来ない点が、依然課題として残っています。(Windows側でアドオンをインストールするか、DNSのみ手動設定という手段で何とか接続させています。)

機器毎に実装が大幅に異なるIPv6が、本当にこのまま普及するのか疑問です。現状はappleが普及に向けた先導をしているように見えますが、Google, Microsoft等、業界大手が足並みを揃えなければ世界的な移行は難しいのでは無いかと思います。

謝辞

今回の構築にあたり加藤さん、吉野さんにはお忙しい中、多大なるご協力を頂きました。私一人では完成まで辿り着けなかったと思います。

本当にありがとうございました。

ミクシィスマホアプリ研修説明会を開催しました & iOS-Training #1 開催のお知らせ

最近の作業用BGMは、マリオ&ルイージRPG3!!!のイン・ザ・ファイナル です。

こんにちは、武田です。

 

さて、先日お伝えしたオープン版スマホ研修の説明会の模様とiOS研修の第一回目についてお伝え致します。

 

説明会の模様について

 

説明会の概要については、connpassのページをご覧ください 


第0回 iOS/Android Training(説明会) - connpass

100名の枠に対して200名以上の応募をいただき、その反響にびっくりしているのですが、皆様の期待に応えらえるように講師一同頑張っていきたいと思います。

また、先日の説明会に参加できなかった方でも、本編の方は参加いただけますので奮ってご参加ください。

続きを読む

ミクシィスマホアプリ研修をオープンに開催します

はじめまして、mixiのiPhoneアプリ開発などをやっています武田です。
最近サントラ欲しさにスマブラを買いました。

さて、1年半ほど前に社内でのスマホアプリ研修を行い、その資料を公開したり電子書籍化などを行いました。
ただ資料も古くなっている部分などもあり、その更新も兼ねて第2回の勉強会を行うことになり、どうせなのでオープンな形で開催しようという運びになりましたのでお知らせいたします。

f:id:mixi_engineers:20150513144017j:plain

続きを読む

Photo Hack Day Japan 結果発表 その2

ミクシィの七尾です。気がつけば「Photo Hack Day Japan 結果発表 その1」から1ヶ月ほど経ってしまいました。年度末で忙しかったとは言え、申し訳ありません。APIスポンサー賞についてご紹介させて頂ければと思います。

続きを読む

Photo Hack Day Japan 結果発表 その1

ミクシィの七尾です。すでに1週間ほど経ってしまいましたが、去る2/22-2/23に米国のAviary("エイヴィアリー"と読みます)と共同でPhoto Hack Day Japanというハッカソンを行いました。改めて参加者のみなさまと以下のスポンサー様に感謝させて頂きます。

当日は全部で23組の作品発表があり、審査では総合1位から3位までと特別賞が2組、各スポンサー様からAPI賞が選出されました。ちゃっかり審査員としても参加させて頂きましたので、早速受賞作品の紹介をしたいと思います。

1位 Back to the Future (賞金30万円)

メンバー: Theeraphol Wattanavekin, Rapee Suveeranont, Yoonjo Shin, Thiti Luang

利用API: Amazon / gettyimages / Leap Motion

URL: http://timetravel.boonmeelab.com/

説明:
Back to the Futureは、時間を超えて旅することのできるcoolなwebアプリです。知りたいことを検索し、大切な記憶や情報を呼び起こすことができます。いいかえれば、時間にそって、人々や場所の移り変わりを見ることができるのです。歴史と進化を見ることができます。
このアプリを使って歴史から学ぶことによって、ただ楽しむだけでなく、より良い自分になることを手助けします。さらに、leap motionをこのアプリに応用することで、時間を散歩するような経験が得られます。ぜひやってみてください!

感想:
4分間という限られた時間でしたが、デモも素晴らしく、独自のコンセプトが光っていたいと思います。言葉で説明するのがちょっと難しいのですが、Leap Motionを利用して、両手を前後にくるくる回すと、入力したキーワードに関する情報のタイムラインが次々にスクロールしていくようなつくりで、Leap Motionを用いたジェスチャーとタイムラインを捲る動きが見事にマッチした作品でした。
gettiimage賞とLeap Motion賞も同時受賞となりました。現在はtimetravelと改名し、Air Space(Leap Motionを利用したアプリのポータルサイト)で公開されています。

2位 Before The Filter(賞金20万円)

メンバー:Benjamin Watanabe, Antony Tran

利用API: Aviary

URL: https://play.google.com/store/apps/details?id=com.antonyt.beforethefilter

説明:
沢山の素晴らしい画像編集ツールを利用することができますが、多くのユーザーが優れた写真に何が必要なのかをわかっていません。これは、Filterをかける前にすばらしい写真に不可欠な要素をアーティストに教えてくれるNativeアプリ、"Before The Filter"(BTF)です。
BTFは、自撮りや食べ物のようなトピックを提供し、そこで必要な撮影テクニックを教えてくれます。さらに、グリッド or テンプレートが表示され、どう使うべきが説明してくれます。撮影を行うと、編集用のtipsを表示してくれます。編集前と編集後の写真を同時に共有することもできます。"フィルターをかける前"でも優れた写真を撮れることを誇り思ってください。

感想:
写真に関するハックと言えば、素敵なフィルターとか、顔検出とか、画像合成のようなテクニカルなものだろうなと勝手に思い込んでいましたが、このチームは写真の撮影テクニックに焦点を当てていた点がユニークでした。裏をかいたアイデアに脱帽です。またデモの時点で既にGoogle Playでリリース済みというのもサプライズでした。Aviary賞も受賞しています。

3位 VOCA Getty (賞金10万円)

メンバー: Atsushi Onoda, Hiroshi Kanamura, Shinichi Segawa, Yasushi Takemoto

利用API: gettyimages / imagga

説明:
VOCA gettyは写真をベースにした単語帳アプリです。 言語情報だけではなく、単語帳にイメージ情報を付与して、単語を覚えやすくしました。

操作の流れ

  1. 単語帳に登録したい言葉を入力します
  2. GettyimagesのSearchForImage APIでイメージ検索が行われます
  3. 検索結果に対して、imaggaのSmart Cropping APIを使って適切な写真を表示します
  4. 使いたいイメージを選択して、完了

このアプリは3つの価値を提供します。

  • ユーザーに対して、画像による効果的な英語学習方法
  • ゲッティーイメージの写真の新しい活用方法
  • ゲッティーイメージのイメージのタグの信頼性をアップ

感想:
外国語の学習においても、写真だから出来る事があるという事を教えてくれたアプリでした。会話で困ったときも、スマホの小さな文字でやりとりするより、写真でイメージがわかれば、確かにすぐに伝わります。会話の特にアメリカから出張中のみなさんには人気の作品でした。

特別賞

以下の2作品にはSendgrid様より特別賞として、Lomographyが贈られました。

Na・Gu・Ri・A・I

メンバー:Yabu Kiyohide, Yuya Matsuo

説明:
ペンは、剣より強し。 写真は、ペンより強し。 そして拳は、写真より強し。 メッセージングサービスで言い合いになるこの世の中、実は足りないのはダイレクトに殴り合うことではないだろうか? 殴り合ったらもちろんその後は仲直り。満身創痍になったお互いの写真をSNSにシェアし、拳を交えた事をたたえ合おう。

概要

  1. まず写真を撮ります。
  2. ゲームが始まります。LEAPセンサーの上でパンチをすると相手を殴ります。手のひらを開いて両手を前に突き出すとガードです。ガードの隙をねらってパンチをしてください。ちょっとした心理戦です。
  3. どちらかの体力が尽きたらゲーム終了です。お互いボコボコになった顔画像付きの合成写真が出来上がるので、Aviaryでかわいくデコレーションしてシェアしましょう。それでも気が済まなかったら直接殴りに行って下さい。

※スクリーンをムービーにしました。以下からご覧頂けます。
https://www.dropbox.com/s/h5g754i7rxt1sj7/Screenshot.mov

感想:
本当にこのチームが1番目で良かったなと思うような楽しいデモでその後のチームも楽しく拝見する事ができました。ゼンリン賞、Flash Photo賞も同時受賞です。

Smile Motion

(諸事情によりスクショ掲載不可)

メンバー:Akira Muramatsu

説明:
Smile Motion は簡単にストップモーションムービーをつくって、世界に笑顔をもたらすアプリです。AviarySDKで写真を加工したり、ShutterStockから写真をダウンロードできます。

感想:
バツグンにデモの内容がぶっ飛んでおりまして、なかなかコメントしずらいのですが、要は好きな写真と音楽を貼り合わせて楽しく簡単に動画が作れるアプリです。技術的に見ても丸1日でここまで作り込めたのはすごいと思いました。

次の記事ではスポンサー各社からのAPI Prizeの結果について発表しますので、いましばらくお待ちくださいませ。

「Photo Hack Day Japan」参加者受付開始のお知らせ

先日告知しました、Aviaryと共同で開催する「Photo Hack Day Japan」の参加応募を受付開始したのでこちらでも告知させていただきます。

多数のスポンサー企業様から協賛頂いたおかげで、今回のイベントは賞金総額60万円+α!しかもプレパーティーから開催期間中の食事まで、全て無償提供となっていますので、是非こちらから奮ってご参加ください!

概要

APIスポンサーから提供された最新の写真に関するAPIを使い、iPhone/Androidアプリを開発

(詳細につきましては公式サイトをご覧ください。)

賞金

最優秀賞:30万円

2等賞:20万円

3等賞:10万円

スポンサー賞(※):スポンサー各社からの賞品

※スポンサー賞はAPIスポンサーがそれぞれに賞を設定しており、各APIごとに、そのAPIを利用したアプリの中で最も優れていると審査されたチーム/個人にそのAPIを提供するスポンサー企業から賞品が贈られます

参加資格

エンジニア:ウェブ開発、iPhone、Androidアプリ開発などのいずれかの経験
UI/UXデザイナー:Illustrator・Photoshopの基本スキル

参加方法

こちらのpeatixのURLで受付しております
参加受付URL:http://photohackdayjapan.peatix.com/
定員:150名(先着順)
※申し込みは個人でもチームでも歓迎です。
※個人で申し込んで、プレパーティーでチームを組んで頂いても大丈夫です。

日程

2月21日(金)

19時〜22時 / Pre-Party

shutterstock様のご厚意により、イベント前夜祭を開催します。参加受付方法などはハッカソン参加者の方に別途ご連絡さしあげます。
もちろん参加無料ですので、ハッカソンに参加される方は是非ご参加ください。

2月22日(土)

09:00 / 開場〜 22:00 / 1日目終了

開場は9時で10時にはAPIデモなどの説明が始まりますので、10時にはご来場をお願いします。

23日(日)

09:00 / 開場〜12:00/ 成果物の提出 〜15:30 / 結果発表

12:00に成果物の提出がありますので、実質12:00までが開発に使える時間だと思ってください。

※22日は朝昼晩の3食、23日は朝昼の2食が無償提供になります!

会場

株式会社ミクシィ - 東京都渋谷区東1-2-20 渋谷ファーストタワー
(渋谷駅から歩いて10分弱くらいです)

協賛

多数の企業からスポンサー参加頂くことになりました。2014年2月7日時点での参加企業は以下の通りです(敬称略)

お問い合わせ先

本イベントに関する詳細は下記メールアドレスよりお問い合わせください。

株式会社ミクシィ
〒150-0011
東京都渋谷区東1-2-20
住友不動産渋谷ファーストタワー7F

phd5@mixi.co.jp

「Photo Hack Day 5」スポンサー募集開始のお知らせ

すっかりご無沙汰しております、スマートフォンアプリエンジニアの七尾です。
この度ビジネスパートナーのAviaryと共同でハッカソンを開催する事になりました。
一般応募に先立ちまして、この場を借りてスポンサー募集のお知らせをさせていただきます。
参加者の募集につきましては決まり次第、公開いたします。

Photo Hack Dayを日本で初開催します!

2014年2月21日(金)~23日(日)に、株式会社ミクシィとAviary社でPhoto Hack Day 5を共同開催いたします!

Photo Hack Day とは、写真編集に関するAPIを使って短期間で行うハッカソンのことです。Aviary社はこれまで4回Photo Hack Dayを開催し、1,500人以上の開発者、デザイナーが参加し250個以上のサービスを作ってきました。

2013年4月にニューヨークでFacebook社とAviary社で共同開催したPhoto Hack Day 4では、300人以上のエンジニア、デザイナーがチームを組み、Dropbox、FUJIFILM、tumblrなどのAPIを利用して63個のサービスを作りました。その中でも優秀なサービスはThe Next WebやTechCrunchなどで取り上げられました。

今回で5回目の開催となる本イベントでは、エンジニア、UI/UXデザイナーに参加していただき、写真編集加工に関するAPIを中心にさまざまなAPIを利用して、写真加工に限らず、SNS、ゲーム、e-コマースなど多岐にわたるサービスの開発を行います。

開催概要

主催:株式会社ミクシィ、Aviary, Inc. 日程:2014年2月21日(金)~23日(日) 場所:株式会社ミクシィ 人数:150名 参加対象者:エンジニア、UI/UXデザイナー イベント内容:

  • 基調講演
  • APIデモ、ワークショップ
  • メインイベント
  • プレゼンテーション
  • 結果発表

ご支援のお願い

Photo Hack Day 5開催にあたり、スポンサーになっていただける企業・個人の方々を募集しております。つきましては、以下の内容をご高覧頂き、スポンサーとしてPhoto Hack Day 5への協賛をご検討頂けますよう、よろしくお願いいたします。
スポンサー特典は以下のとおりです。スポンサー額、特典などの詳細はお問い合わせ先メールアドレスまでご連絡ください。

過去の開催について

Photo Hack Day 4(http://www.photohackday.org/)の様子

お問い合わせ先

本イベント、スポンサーに関する詳細は下記メールアドレスよりお問い合わせください。

株式会社ミクシィ
〒150-0011
東京都渋谷区東1-2-20
住友不動産渋谷ファーストタワー7F

phd5@mixi.co.jp