BASE開発チームブログ

フリーミアムなネットショップ構築サービス BASE( https://thebase.in )の開発チームによるブログです。開発メンバ積極募集中! https://www.wantedly.com/companies/base/projects

Try! Swift 2017 - 1日目「アプリを新次元に導く3D Touch」

こんにちは、iOSエンジニアの遠藤(秀)です。 3/2(木)〜 3/4(土)の3日間に渡って開催された世界的なイベント「Try! Swift 2017」に参加してきました。

1日目のセッション「アプリを新次元に導く3D Touch」についてまとめてみました。

セッション概要

この講演では3DタッチAPIで何ができるか?そして3DタッチAPIを使うベストプラクティスを学びます。元々どのような機能があり、iOS10でどのようなカスタマイズが加えられたかを見ていきます。クールな事例を通してあなたのアプリを3Dタッチに対応させる方法を探っていきましょう。



キーワード 、まとめ

・Home Screen Quick Actions(Static / Dynamic)
・Widget (Today Extension)
・Peek & Pop(UIPreviewInteractions)
・iOS 10 Notifications(Notification Content Extension)


Home Screen Quick Actions(Static / Dynamic)

3D Touchには、静的なStatic Actionsと、動的に動作を割り当てるDynamic Actionsの2種類があります。

BASEアプリでは、Staticアクションを実装しています。Info.plistへの追加と、ApplicationDelegateにメソッドの追加だけで手軽に実装することができます。

f:id:base_hideo:20170307143326p:plain


Info.plistに、UIApplicationShortcutItemTypeキーにアクション種別を表す文字列を、 UIApplicationShortcutItemTitleキーにアクション種別を表す文字列の設定が必須となります。

f:id:base_hideo:20170307143352p:plain

その他の設定値についての詳細はこちら。 https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/iPhoneOSKeys.html#//apple_ref/doc/uid/TP40009252-SW36


メニューが選択され、アプリが起動すると application:performActionForShortcutItem:completionHandler: メソッドが呼ばれます。

func application(application: UIApplication, performActionForShortcutItem shortcutItem: UIApplicationShortcutItem, completionHandler: Bool -> Void) {
    let handled = handleShortCutItem(shortcutItem)
    completionHandler(succeeded)
}



Widget (Today Extension)

iOS 10以降で、NCWidgetDisplayModeが追加され、Compact / Expandedの2つのモードがあります。

上記の説明だけで、あっさりとしたものでした。機能自体はiOS8から導入されていて、通知センターからアプリケーションへと送客できるので、流入経路を増やす意味でも有効ではないかと思います。

実装方法については、こちらで詳しく紹介されています。
https://techblog.yahoo.co.jp/ios/today-widget/

他にも流入経路を増やす方法として、2日目のセッション「 iOSにおけるDocument IndexingとApp Search」で、ECアプリの商品詳細画面に飛ばす手法が紹介されており、こちらの機能も検討したいところです。

App Search Programming Guide https://developer.apple.com/library/prerelease/content/documentation/General/Conceptual/AppSearch/index.html


Peek & Pop(UIPreviewInteractions)

内容をプレビューしたり、そのまま画面を遷移したりできます。文字通り覗き見と画面遷移をセットで考える必要があり、実装箇所が適切か検討する必要があります。

f:id:base_hideo:20170307143455p:plain


設定が無効になっている場合や、3D Touchに対応していないときは、ロングプレスを使って似た処理を実装することができます。

f:id:base_hideo:20170307143346p:plain


実装方法については、Appleのサンプルコードが提供されています。 https://developer.apple.com/library/content/samplecode/ViewControllerPreviews/Introduction/Intro.html


iOS 10 Notifications(Notification Content Extension)

iOS10から、プッシュ通知にメディア情報(Image / Audio / Video)を添付できるようになっただけでなく、UIのカスタマイズも可能になりました。

前述のPeak & Pop同様、プッシュ通知に添付されたメディアをプレビューすることができます。

f:id:base_hideo:20170307143445p:plain

できれば、アプリ側に流入して回遊してほしいところではあるので、プレビューでユーザに満足感を与えてしまうことが良いのか、判断に迷うところではあります。


その他

3D Touch対応することによって、AppStoreでフィーチャーされるかもしれません。

f:id:base_hideo:20170307145000p:plain

SendGridはゴールドプランがお得

こんにちは!CTOのえふしんです。

SendGridの料金プランの精査をしていたのですが、例えば、メールを月に500,000通送る場合、プラン別でかかるコストは以下のようになります。

f:id:f-shin:20170130202257p:plain

SendGridのプラン選定は、基本料金と超過料金をうまく組み合わせるのがコツのようで、月に50万通送る場合は、プラチナプランよりもゴールドプラン+超過料金の方がお得になります。

もし、システムが毎月送っているメールで月50万通ぐらいあるなら、プラスαの余裕を考えてプラチナプランで良いと思いますが、マーケティング目的などで、その月によって送るメールの数の差異が、結構あるようであれば、たまに90万通ぐらい行くことを想定しても、ゴールドプランの方がお得な使い方もあるように思えます。

そこで、超過料金を組み合わせたメール送信数とプラン別料金のグラフを書いてみました。

f:id:f-shin:20170130182316p:plain

メールの送信数が増えた時に、より単価の低い上位2プランの方がお得感があるのは当然のこととしても、上位2プランのうちゴールドとプラチナを比べた時に、下位に属するゴールドプランの健闘が目を引きます。

というのもゴールドのメール送信単価は0.06円、プラチナだと0.055円とメール送信単価に差があまりないのが理由で、120万通送った時のコストは、ゴールドで76,980円、プラチナプランで73,480円と、3,000円しか変わりません。

もし月に送る送信数が、相応にバラつくのであれば、ゴールドのほうが月平均のコストは低くなるかもしれませんので、サービスの成長にあわせて、ぜひ、ご検討ください。

サービスが順調に成長し、月に送るメールの桁が変わって、更に上を目指す場合には、SendGridを国内販売している構造計画研究所さんに相談すると適切なプランを教えてくれたりするようです。

なお今回は、有料プランの中でも、お試しプランに該当するブロンズプランは無視して話を書いておりますので、とりあえず試してみるのであれば、FREEプランまたは月1,180円で使えるブロンズプランから評価導入できますので是非、お試しくださいませ。

こちらにシミュレーションに使ったデータを公開しておきますね。

料金シミュレーション - Google スプレッドシート

BASEドメインをご利用の全てのショップで常時SSLが使えるようになりました

皆さん。こんにちは。BASEの藤川です。

今年の4月頃に、BASEドメインの常時SSL化の取り組みについて発表させていただきました。

thebase.in

リリース時は、新規登録ショップのみの対応だったのですが、本年の9月末に、全てのBASE社においてご提供しているドメイン(thebase.inや、shopselect.netなど...)をご利用のお店においてSSLがお使いいただけるようになりました。

3月末以降に登録したお店は、最初からSSL対応になっていたのですが、それ以前からお店を開いている場合は、お店の管理画面の方でSSLをオンにしていただく必要があります。

そのやり方ですが、ショップ管理画面の「ショップ設定」にある、「SSL設定」を有効にしていただくだけです。

f:id:f-shin:20161004003434p:plain

この変更によるお客様への影響は、いくつか想定がございます。

  1. Google アクセス解析の変更や、Google Webマスターツールの再登録が必要になります。
  2. それ以外の外部サイトもURLの変更が必要になる場合がございます。
  3. この設定変更に伴うSEOの影響については考慮はしておりますが、100%影響がないという保証はございません。
  4. SEO上の混乱を防ぐために一度SSLに変更したら原則的に戻す機能は提供しておりません。(http://に戻すことは可能です)
  5. httpでアクセスしても、httpsにリダイレクトされますので、これまでの外部リンクは切れません。

(SEOへの対策としまして、httpからhttpsへの恒久的な引っ越しを示す、301リダイレクトおよび、HTML上のcanonical URLの記述により、検索エンジンのクローラに、SSLサイトへ変更されたという誘導を行っており、最大限の配慮を致しております)

検索エンジンクローラの視点では、サイトの引っ越しという扱いになりますので、ショップ様のご判断でSSLへの設定変更をお願い致します。

また、独自ドメインをお使いのショップ様については、もう少しお時間をください。年内を目処に作業を進めております。

そもそもSSL対応って何?

SSL対応というのは、お手持ちのブラウザと、サーバの間の通信を暗号化し、仮に通信経路で情報を盗聴されても、送信したクレジットカード番号や個人情報が漏洩しないようにする通信方式になります。

http://○○.thebase.in ではなく、https://○○.thebase.in などとhttpsからから始まるURLが特徴です。

クレジットカードやメールアドレスをサーバに送信する画面では、暗号化するのは最低限のWebサーバのセキュリティの常識となっております。BASEにおいても、リリース当初から、決済やメールアドレスを登録する画面はSSLページで構成されております。

今回のSSLの対応は、従来のセキュリティが求められるページの対応ではなく、通常の商品ページなどをSSLに対応する変更となります。

そもそも今回の変更が何故必要なの?

これはインターネットを取り巻くトレンドの変化が影響しております。

昨今、世界中で、スマートフォンから町中で簡単に接続できる無線LANスポットがあります。無線LANスポットの中では、暗号化されていない通信方法や、悪意のある者によるニセの無線LANのアクセスポイントを提供し、通信内容を盗聴するリスクが懸念されています。そのため、無線LANに流れる通信内容は、すべてSSLで暗号化しておきたいというセキュリティ上の見解があります。

この見解を元に、Androidを提供するGoogle社、iPhoneを提供するApple社は、現在、フルSSLへの変化を推し進めております。

その施策の一つとして、2017年から徐々に、Googleのブラウザ(Chrome)において、SSLを使っていないページにアクセスした際に、ブラウザ上で警告を表示するようになる予告をしております。

2017年初頭においては、クレジットカード情報を送る画面などが警告の対象になり、徐々に、全ての非SSL画面において警告を出す予定である旨が公開されています。

当社では、このようなインターネット業界の変化に先んじて対応し、全ての画面をSSL化しておくというのが、今回の取り組みとなっております。

BASEが保有するドメインについては、9月末にて全てのショップ様にSSL化する機能を提供いたしました。 今後、独自ドメインもSSL化できるような作業を進めてまいります。

私共は、BASEショップをお使いの方々に、安心してお店を運営に専念いただける開発を続けてまいります。 年末から来年にかけてSSL化の話題も増えていくかと思いますので、ご都合の良い時に、SSLの設定もご活用いただきますようお願い申し上げます。

【Excelのすゝめ】BASEのCSVから納品書を印刷するExcelサンプルを公開いたしました。

こんにちは!BASE CTOの藤川です。

BASEのCSVダウンロードでダウンロードできる注文データから、納品書を作成し印刷するExcelシートをサンプル的に作ったので公開いたします。もしExcelを勉強したい人がいたらご参考ください。

なお、仕事の合間にさくさくと作ってみましたので、相当、緩い感じのものです。

BASEでは納品書Appsをインストールすると簡単に納品書をダウンロードして印刷することができるのですが、一枚ずつ印刷する仕組みなので、受注がものすごいたくさんある場合に、かなり手間がかかってしまいます。

理想を言えば、BASE本体で一括ダウンロードの仕組みを作れればよいのですが、サーバによるPDF生成は処理も重く、さらっと簡単にはできないので、その代わりにと僕の作業用にとExcelシートを作ってみました。

ダウンロード方法

こちらからダウンロードいただけます。

github.com

(すみません。こちらはBASE社のサポート外となりますので、サポートの方に使い方などはお問合せいただかないようお願い申し上げます)

このExcelデータについて

あらかじめ謝っておきますと、こちらのデータはBASEのようにものすごい簡単に使うことができます!というわけではななく、Excelのシートの作りをある程度読み解く力が必要です。

Excelをまったく使ったことない方であれば、少しお勉強をしていただく必要があります。

このシートを扱うExcelの技術は、

  1. ちょっとしたピボットテーブル
  2. ちょっとしたExcel関数 (vlookupと文字列連結、if , iferrorのあたり)
  3. ちょっとしたVBA

です。

使い方

1.このExcelシートを開いてください。

印刷するのにVBAを使いますので、マクロを実行する許可をしてください。(Office365だと、アクティブコンテンツの実行許可というのが必要のようですね。)

このファイルには、4つのシートがあります。

  • シート名【CSV】・・・BASEから取り込んだCSVデータを読み込むシートです。
  • シート名【pivot】・・・CSVデータを購入単位で扱えるように購入額や送料を集計しています。ピボットテーブルで構成された中間データ用のシートです。
  • シート名【items】・・・納品書の商品名を差し込むのに使う商品情報を並べています。少しExcel用のテクニックにあわせて作ってある中間データ用のシートです。
  • シート名【output】・・・納品書の印刷レイアウトの帳票です。ここの中身を編集して、よしなに納品書を作ることができます。   

なお、印刷実行時に「output」のA1に白い文字列でページ名を書いているので、A1セルだけは使わないようにしておいてください。(HTMLで言うinput type = hiddenみたいな使い方をしています)

2.【CSVシート】に、BASEからダウンロードしたCSVを読み込みます。

最近まで知らなかったのですが、ExcelでCSVを取り込むときは、CSVファイルを直接開くのではなく、「データ」メニュー >「外部データの読み込み」から読み込むべきだったんですね。Excelで、CSVを直接開くと、数字だけのIDや、日付けのデータが省略されてしまったりして、かなり面倒くさいことになってて、Excelつかえねーなーと思ってましたが、僕が無知なだけでした、MSさんすいません。(ただファイルメニューじゃなくて、データメニューに置かれると気が付かないよね)

「外部データの読み込み」を使うと、そのセルは、文字列として読んだり、データの区切り文字を細かく設定することができるので、セルの内容が、桁数の多い数字として省略表記されてしまったり、勝手に改行されて面倒くさいなどと言った現象を回避することができます。

この機能を使って、「CSV」と言うシートに読み込んでください。A1セルから読み込みます。

BASEのCSVを読み込むコツは、「注文ID」をテキストデータとして読み込むところです。 また、BASEのCSVは、あたりまえのことではありますが「カンマ区切り」のファイルなので、データの区切り文字はカンマに設定します。

3.【pivot】というシートと、【items】というシートの行数を【CSV】で読み込んだデータ量にあわせて変更してください。

この2つのシートは、BASEのCSVを【CSV】シートにA1から、読み込んでもらえれば、自動的に集計をしてくれるようになっています。

【pivot】は、購入ごとの販売額を算出しています。よくBASEのCSVは、送料が重複して困るという意見がありますが、こちらのテーブルは送料の重複を弾いたものを算出しています。つまり、購入の合計額を計算できるようにしてあります。 【items】は、商品ごとの明細を算出しています。納品明細に商品を複数個並べるために、少しExcelのテクニックを使ってるシートになります。

どちらもうまくデータが表示されてなければ、正しい納品書を印刷することはできません。

で、調整が必要な部分は、読み込んだCSVの行数はその都度変わると思うので、その部分に関するものになります。アバウトに100レコードぐらいは自動集計するようにしてありますが、もっと沢山の購入情報を扱う場合は、適宜調整が必要です。見よう見まねでできるようにと公開しているつもりではございますが、この操作にExcelの基礎的な経験が必要になります。

なお、ピボットテーブルを活用すると納品書だけじゃなくて、一番購入いただいているお客さんを抽出したりランキングしたり、などいろいろ応用が効きますので、ピボットテーブルはExcel応用活用のキホン中のキホンなので、少しわかりにくいけど我慢して学ぶだけの価値のある機能ですのでオススメです。僕も、自分の家計簿、出費分析をするために勉強しました。

4.「開発」タブ>「Visual Basic」を開いて、スクリプトを実行します。(ただし作業あり)

もしかしたら、みなさまのexcelには「開発」タブが表示されてないかもしれないので、Excelの環境設定タブから表示してください。

無事にVisual Basic Editorが表示できると「This Workbook」というところに印刷のプログラムが書いてあります。

f:id:f-shin:20160604075322p:plain

ここでやってることは、【output】のA1セルに透明に書いてあるページ番号というのがあるのですが、これを可変させると、【output】の帳票シートは、【pivot】と【items】から購入毎の情報を持ってきて自動的に納品書を切り替えてくれます。それを印刷するためのスクリプトです。

で、今のところ、大変手抜きで申し訳ないのですが、レコードが何個あるとか、どこまで印刷するかは、プログラム内に即値で書いてしまっているので、ここの行数は都度変更が必要です。

Private Sub NouhinPrint()

    Dim num As Integer
    
    For num = 1 To 18
    
        Sheets("output").Range("A1").Value = num
        Sheets("output").PrintOut
        
    Next num

End Sub

上記のソースコードの18という部分を、pivotシートの印刷したい枚数に変更します。じゃないとどんどん18枚まで印刷しちゃう極悪仕様です。

このシートを使ってくださる人が増えそうだったら【pivot】の行数に合わせて動かすようにするとか、後述する参考サイトに習ってダイアログでその都度聞くようにしたいと思います。

是非、お使いいただけそうであれば、githubのスターを押してください。また、詳しい方のプルリクお待ちしております。

余談ですが、VBScriptが久しぶり過ぎて戸惑いました。コメントアウトの文法もすっかり忘れていました。

あと関数名が素人っぽくてダサダサでごめんなさい。

また、特に印刷ダイアログを開くことなく、ガシガシ印刷してしまうのでご注意ください。デフォルトのプリンターに印刷してしまいます。

免責

このデータは不完全かもしれません。あくまでも皆様にExcelをおすすめするためのサンプルデータの扱いです。

これによって起きた問題については、責任を取りかねます。 BASE公式のデータでもありませんので、ご利用については、あくまでもご自身の責任においてご利用ください。

謝辞

私自身Excelの操作は詳しい方ではないので、Googleで検索してどうにか作りました。また、納品書の印刷データレイアウトの方も、外部のサイトさんが配布されているデータを参考にさせていただいたので、そちらのURLを記載させていただきます。

matome.naver.jp 基本構造はこちらのサイトを参考にいたしました。

invoice.moneyforward.com 納品書フォーマットはマネフォさんのサンプルデータを参考にさせていただきました。

Excelのすゝめ

最近の若い人は、最初からGoogle spreadsheetなどのWebネイティブのサービスを使っていてMS-Officeに触る機会がない方もたくさんいらっしゃると思います。特にWeb系ベンチャーは、MS-Officeを買うのは、それを必要とする特別な人に限られているのが現状ではないでしょうか?

Google Spreadsheetも良いのですが、Excelは今も光り輝いている魔法のツールで、いろいろ使い方を知っていると、業務効率が格段に向上します。

今回の差し込み印刷のようなものを調べてみたのですが、ものすごく丁寧に作っているツールで、50万円もするようなアプリも検索で見つかります。しかし、ちょっとExcelの扱い方を知っていると、そこまで難しい勉強をせずともツールを工夫することで似たようなことができます。

なんでもかんでも勉強すべきとは思わないのですが、Excelぐらいは、ビジネスマンのたしなみとして勉強しても良いのかなって思います。もしビジネスにおいてExcelを使えるようになると、皆様の利益に大きく貢献してくれますので、もし、ご興味あればExcelも勉強などされてみてはいかがでしょうか?

昔は何万円もしていたMS-Officeも今では月1,000円で使えるので、是非勉強してみてください!

Office 365 Business - ベーシックな中小規模のビジネス向けソフトウェア

なお、もしExcelを勉強されたい場合、ネットにある沢山の情報を検索してもよいのですが、技術評論社さんが出してるExcel本シリーズも沢山ありますので、ちゃんとまとまった情報が集まっている書籍の方が、時間的な手間は短く済むかもしれません!

検索:Excel | Gihyo Digital Publishing … 技術評論社の電子書籍

このようなツールを学ぶポイントは、一冊読んでみて、わからないなーと思ったら、次の本に行きましょう。人それぞれペースがありますから、自分にあった本を見つけるのが大切。

しばらく、いろんな本を読んでると徐々に慣れてきて、気が付いたら、最初にわからなかった本を読むことができるようになったりします。技術の学び方のキホンですね!

みなさまのお役に立てると幸いです。

BASEのアプリにMaterial Designを導入する際にやったこと考えたこと【転載】

f:id:t_mifuru:20160523121117p:plain

はじめまして、BASEでアプリのデザインをしてる、三古 達也(みふる たつや)です。
先日、BASEのアプリ(iOSとAndroid)がリニューアルしました。
今回はAndroidのお話。今までiOSとAndroidのデザインが全く同じでAndroidのガイドラインに沿ったデザインを行えていなかったので今回のリニューアルを機にマテリアルデザインを採用しました。そのとき流れやデザインまでのプロセスを簡単にをまとめた記事を個人のブログに書いたのですが、今回このBASEの技術ブログに転載させていただくことになりました。
ぜひご覧ください!

BASEのアプリにMaterial Designを導入する際にやったこと考えたこと

アプリのダウンロードはこちら

iOSアプリのダウンロードはこちら
Androidアプリのダウンロードはこちら