こんにちは、iOSエンジニアの遠藤(秀)です。 3/2(木)〜 3/4(土)の3日間に渡って開催された世界的なイベント「 Try! Swift 2017 」に参加してきました。 2日目のセッション「Swiftで堅牢なカラーシステムを構築する」について、まとめてみました。 セッション概要 これまで以上に多くの企業が、新しく増え続けるユーザーに今までよりも魅力的なアプリだとアピールするために、アプリを再設計しています。この講演ではあらゆる規模のプロジェクトにスケールできる堅牢なカラーシステムを構築するための戦略について議論します。これらのアプローチはデザイン上の決定を迅速に繰り返すのに役立ち、実行時にカラーパレットのテーマを変更するようなこともできるかもしれません。さらに、iOS 10で導入された新しいカラーフィルターのアクセシビリティ機能を使用して、色覚の問題を抱える人を支援することにも応用できることを示すデモンストレーションも行います。 キーワード 、まとめ ・プロトコル、エクステンションで堅牢なカラーシステムにする。 ・ランタイムでカラーテーマを変更する。 ・色覚障がいを含む、全てのユーザについて考慮すべき。 BASEアプリでのカラーマネージメント BASEアプリでは、なるべくコード量を減らすためにclrファイルを作成して、xibファイル側に色情報を持たせるように移行している途中でした。 ・ clrファイルの作成方法 セッション中の説明にもあったとおり、clrファルでカラーパレットを共有したとしても、カラーパレットに変更が起こったときには、全てのxibファイルを書き直す作業が必要になります。また、プログラマティックにカラーテーブルをダイナミックに変更することができません。 これらの問題を解決するので手法として、今回のセッションはとても参考になる内容でした。 エクステンションの作成 UIColorのエクステンションを作成してstructを定義します。 extension UIColor { struct Palette { static let ceruleanBlue = UIColor(red: 0.0 / 255.0, green: 158.0 / 255.0, blue: 220.0 / 255.0, alpha: 1.0) static let cannonPurple = UIColor(red: 147.0 / 255.0, green: 78.0 / 255.0, blue: 132.0 / 255.0, alpha: 1.0) static let mulberryRed = UIColor(red: 197.0 / 255.0, green: 81.0 / 255.0, blue: 82.0 / 255.0, alpha: 1.0) static let fireBushOrange = UIColor(red: 225.0 / 255.0, green: 148.0 / 255.0, blue: 51.0 / 255.0, alpha: 1.0) static let saffronYellow = UIColor(red: 242.0 / 255.0, green: 190.0 / 255.0, blue: 46.0 / 255.0, alpha: 1.0) static let sushiGreen = UIColor(red: 118.0 / 255.0, green: 184.0 / 255.0, blue: 59.0 / 255.0, alpha: 1.0) static let black = UIColor(white: 44.0 / 255.0, alpha: 1.0) static let white = UIColor.white } } ・クラス変数 / クラスメソッドにて色を取得します。 class var primaryText: UIColor { return Palette.black } class func contentBackground() -> UIColor { return Palette.white } ・デザイナー・エンジニア間でZeplinを使用している場合、カラーテーブルをエクステンションとして出力することが出来て便利です。 カラーテーマの適用 ・アプリの外観を変更(LINEの着せ替えとか。)するような場合、ノティフィケーションを使用してカラーテーマを変更します。 最初にColorUpdatableプロトコルを定義します。 /// A protocol which denotes types which can update their colors. protocol ColorUpdatable { /// The theme for which to update colors. var theme: Theme { get set } /// A function that is called when colors should be updated. func updateColors(for theme: Theme) } ノティフィケーションの名前を定義するためのプロトコル、ColorChangeObservingを定義します。 /// A protocol for responding to `didChangeColorTheme` custom notifications. protocol ColorThemeObserving { /// Registers observance of `didChangeColorTheme` custom notifications. func addDidChangeColorThemeObserver(notificationCenter: NotificationCenter) /// Removes observance of `didChangeColorTheme` custom notifications. func removeDidChangeColorThemeObserver(notificationCenter: NotificationCenter) /// Responds to `didChangeColorTheme` custom notifications. func didChangeColorTheme(notification: Notification) } ヘルパー用の関数を作ります。 private extension ColorThemeObserving { /// Returns the theme specified by the `didChangeColorTheme` notification’s `userInfo`. func theme(from notification: Notification) -> Theme? { // . . . return theme } /// Updates the colors of `ColorUpdatable`-conforming objects. func updateColors(from notification: Notification) { guard let theme = theme(from: notification) else { return } if var colorUpdatableObject = self as? ColorUpdatable, theme != colorUpdatableObject.theme { colorUpdatableObject.theme = theme colorUpdatableObject.updateColors(for: theme) } } } カラーテーマが変更されたノティフィケーションを受信します。 extension UIViewController: ColorThemeObserving { @objc func didChangeColorTheme(_ notification: Notification) { updateColors(from: notification) } } テーブルビュー、コレクションビューでも同様にノティフィケーションを受信します。 extension UITableViewController { @objc override func didChangeColorTheme(_ notification: Notification) { updateColors(from: notification) tableView.reloadData() } } extension UICollectionViewController { @objc override func didChangeColorTheme(_ notification: Notification) { updateColors(from: notification) collectionView?.reloadData() } } テーマ毎に色の変更を行います。 extension UIColor { class func backgroundContent(for theme: Theme) -> UIColor { switch theme { case .light: return Palette.white case .dark: return Palette.black } } // . . . } ビューコントラー側でテーマカラーを適用します。 extension ViewController: ColorUpdatable { func updateColors(for theme: Theme) { view.backgroundColor = .contentBackground(for: theme) childView.updateColors(for: theme) // . . . } } 色覚障がいについて ・男性の8%、女性の0.5%が何らかの色覚障がいを持っているとのことでしたが、実際には地域によって割合は異なります。 色に意味を持たせて、緑色は正常、赤色は異常という文化が広がっていますが、それらを識別できないと、そのメッセージは伝わりません。 iOS10では、色覚障がい者向けのカラーフィルター設定を持っており、全ての色のコントラストに適用します。 色覚障がい者向けのフィルター設定を適用します。 import InclusiveColor extension UIColor { class func primaryText(for theme: Theme, blindnessType: InclusiveColor.BlindnessType = .normal) -> UIColor { let color: UIColor = { switch theme { case .light: return Palette.black case .dark: return Palette.white } }() return color.inclusiveColor(for: blindnessType) } }
こんにちは、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にメソッドの追加だけで手軽に実装することができます。 Info.plistに、 UIApplicationShortcutItemType キーにアクション種別を表す文字列を、 UIApplicationShortcutItemTitle キーにアクション種別を表す文字列の設定が必須となります。 その他の設定値についての詳細はこちら。 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) 内容をプレビューしたり、そのまま画面を遷移したりできます。文字通り覗き見と画面遷移をセットで考える必要があり、実装箇所が適切か検討する必要があります。 設定が無効になっている場合や、3D Touchに対応していないときは、ロングプレスを使って似た処理を実装することができます。 実装方法については、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同様、プッシュ通知に添付されたメディアをプレビューすることができます。 できれば、アプリ側に流入して回遊してほしいところではあるので、プレビューでユーザに満足感を与えてしまうことが良いのか、判断に迷うところではあります。 その他 3D Touch対応することによって、AppStoreでフィーチャーされるかもしれません。
こんにちは!CTOのえふしんです。 SendGridの料金プランの精査をしていたのですが、例えば、メールを月に500,000通送る場合、プラン別でかかるコストは以下のようになります。 SendGridのプラン選定は、基本料金と超過料金をうまく組み合わせるのがコツのようで、月に50万通送る場合は、プラチナプランよりもゴールドプラン+超過料金の方がお得になります。 もし、システムが毎月送っているメールで月50万通ぐらいあるなら、プラスαの余裕を考えてプラチナプランで良いと思いますが、マーケティング目的などで、その月によって送るメールの数の差異が、結構あるようであれば、たまに90万通ぐらい行くことを想定しても、ゴールドプランの方がお得な使い方もあるように思えます。 そこで、超過料金を組み合わせたメール送信数とプラン別料金のグラフを書いてみました。 メールの送信数が増えた時に、より単価の低い上位2プランの方がお得感があるのは当然のこととしても、上位2プランのうちゴールドとプラチナを比べた時に、下位に属するゴールドプランの健闘が目を引きます。 というのもゴールドのメール送信単価は0.06円、プラチナだと0.055円とメール送信単価に差があまりないのが理由で、120万通送った時のコストは、ゴールドで76,980円、プラチナプランで73,480円と、3,000円しか変わりません。 もし月に送る送信数が、相応にバラつくのであれば、ゴールドのほうが月平均のコストは低くなるかもしれませんので、サービスの成長にあわせて、ぜひ、ご検討ください。 サービスが順調に成長し、月に送るメールの桁が変わって、更に上を目指す場合には、SendGridを国内販売している構造計画研究所さんに相談すると適切なプランを教えてくれたりするようです。 なお今回は、有料プランの中でも、お試しプランに該当するブロンズプランは無視して話を書いておりますので、とりあえず試してみるのであれば、FREEプランまたは月1,180円で使えるブロンズプランから評価導入できますので是非、お試しくださいませ。 こちらにシミュレーションに使ったデータを公開しておきますね。 料金シミュレーション - Google スプレッドシート
皆さん。こんにちは。BASEの藤川です。 今年の4月頃に、BASEドメインの常時SSL化の取り組みについて発表させていただきました。 thebase.in リリース時は、新規登録ショップのみの対応だったのですが、本年の9月末に、全てのBASE社においてご提供しているドメイン(thebase.inや、shopselect.netなど...)をご利用のお店においてSSLがお使いいただけるようになりました。 3月末以降に登録したお店は、最初からSSL対応になっていたのですが、それ以前からお店を開いている場合は、お店の管理画面の方でSSLをオンにしていただく必要があります。 そのやり方ですが、ショップ管理画面の「ショップ設定」にある、「SSL設定」を有効にしていただくだけです。 この変更によるお客様への影響は、いくつか想定がございます。 Google アクセス解析の変更や、Google Webマスターツールの再登録が必要になります。 それ以外の外部サイトもURLの変更が必要になる場合がございます。 この設定変更に伴うSEOの影響については考慮はしておりますが、100%影響がないという保証はございません。 SEO上の混乱を防ぐために一度SSLに変更したら原則的に戻す機能は提供しておりません。(http://に戻すことは可能です) 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の設定もご活用いただきますようお願い申し上げます。
こんにちは!BASE CTOの藤川です。 BASEのCSVダウンロードでダウンロードできる注文データから、納品書を作成し印刷するExcelシートをサンプル的に作ったので公開いたします。もしExcelを勉強したい人がいたらご参考ください。 なお、仕事の合間にさくさくと作ってみましたので、相当、緩い感じのものです。 BASEでは納品書Appsをインストールすると簡単に納品書をダウンロードして印刷することができるのですが、一枚ずつ印刷する仕組みなので、受注がものすごいたくさんある場合に、かなり手間がかかってしまいます。 理想を言えば、BASE本体で一括ダウンロードの仕組みを作れればよいのですが、サーバによるPDF生成は処理も重く、さらっと簡単にはできないので、その代わりにと僕の作業用にとExcelシートを作ってみました。 ダウンロード方法 こちらからダウンロードいただけます。 github.com (すみません。こちらはBASE社のサポート外となりますので、サポートの方に使い方などはお問合せいただかないようお願い申し上げます) このExcelデータについて あらかじめ謝っておきますと、こちらのデータはBASEのようにものすごい簡単に使うことができます!というわけではななく、Excelのシートの作りをある程度読み解く力が必要です。 Excelをまったく使ったことない方であれば、少しお勉強をしていただく必要があります。 このシートを扱うExcelの技術は、 ちょっとしたピボットテーブル ちょっとしたExcel関数 (vlookupと文字列連結、if , iferrorのあたり) ちょっとした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」というところに印刷のプログラムが書いてあります。 ここでやってることは、【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でアプリのデザインをしてる、三古 達也(みふる たつや)です。 先日、BASEのアプリ(iOSとAndroid)がリニューアルしました。 今回はAndroidのお話。今までiOSとAndroidのデザインが全く同じでAndroidのガイドラインに沿ったデザインを行えていなかったので今回のリニューアルを機にマテリアルデザインを採用しました。そのとき流れやデザインまでのプロセスを簡単にをまとめた記事を個人のブログに書いたのですが、今回このBASEの技術ブログに転載させていただくことになりました。 ぜひご覧ください! BASEのアプリにMaterial Designを導入する際にやったこと考えたこと アプリのダウンロードはこちら iOSアプリのダウンロードはこちら Androidアプリのダウンロードはこちら
こんにちは!BASE CTOの藤川 ( id:f-shin )です! 連休直前の4/27にBASE社開催のMeetup「Commerce & Payment - BASE Talk」を開催しました。 いつもは、BASE drinkというプレゼン資料なしのカジュアルトークイベントをやっているのですが、今回はLT形式で当社のエンジニアと外部参加の方にプレゼンしていただきました。 今回は、その内容であるBASEとPAY.JPのプレゼンの紹介をいたします。 どれも決済とECに携わっている人であれば当たり前に取り扱っている技術について、お話させていただきました。 LTの資料なので、数分でサクッと見ていただけるようになっております。 数百万の商品画像サムネ生成について 創業時から存在していたcronによる画像サムネイル生成バッチから、AWSのLambdaを使ったサムネイル生成に移行した話です。元々、ショップさんからCSVアップロードで大量の商品登録がなされた際に、サムネイル生成が遅くなる状況があったので、AWSのLambdaを使ってサムネイルを即時生成できるようにしました。 資料の中に「高速化したことは誰も気づいていない」と書いてあるのですが、BASEのスマートフォンアプリでは、ショップさんが商品を登録した瞬間に、そのお店のファンになっているアプリユーザーに、新着商品のプッシュ通知が送られて商品の即時購入が可能になっているので、当たり前のようにサムネイルが生成されていないと、ユーザ体験が完結しないため、大切な仕事なのでした! クレジットカードのBINとは クレジットカードの発行者や発行国を識別するBINコードの話でした。 中国籍の単に、中国からも多くやってくる海外不正カード対策の処理をやってもらうという、個人的には大変興味深い状況なのですが、当人もグローバルタスクということで喜んでやってくれました。 昨今、EC業界では越境ECという海外への販売が話題ですが、そうは言ってもなかなか難しいんですよね。BASEでは昨年、チャージバック問題がいくつか発生した時に、一旦、決済のパートナー会社の方で海外カードの利用を止めてもらったのですが、それだと我々が今後、コントロール性が得られなくなってしまうので、我々の方で海外カードの利用制御を行えるようにしたという話になります。 フィンテックというカテゴリにおいては、技術でリスクを解決し自由度とこれまでにないユーザ体験を作っていくことが求められるのですが、それは毎日の積み重ねによってできること。それの一つのお話でした。今後、不正決済対策も含めて、たくさん面白いことをやっていきたいので、ECをフィンテックの一ジャンルと捉え、高いユーザ体験の実現、将来の与信実現に繋げるデータ解析、フィンテックに興味のあるエンジニアを募集しています。 BASEにおける完全SSL化の取り込みと今後の展望 先日、リリースを出させていただきましたが、BASE全体のSSL化のお話です。これまで決済サーバについては当然、SSL化していましたが、多くのECカートASPがやっている方法同じく、決済サーバのみを決められたSSLのサーバにリダイレクトして購入手続き行う構成でした。 それをショップさん独自のページである「お店の画面」にもSSLを広げる取り組みです。 BASEでは、ショップ登録時に10個のドメインをお選びできます。そのためサーバ証明書においても地味に「マルチドメイン」で「ワイルドカードなドメイン」が求められるので、さくっと簡単にはできなかったんですよね。 最初、ELBを10台並べて、Webサーバの接続を自動化しないといけないかと思いましたが、シンプルに解決してよかったです。 次は独自ドメインのSSL化ですね。これは更にハードルが高いので、今後、解決したら、またご報告させていただきますね! 関連URL: Googleが進める常時SSL化、BASEも対応開始【ECのミカタ】 PAY.JP クレジットカードとは何か 当社のクレジットカード決済サービス PAY.JPから、改めてクレジットカードについての話、そしてそこからPAY.JPは何ができるのか?という話をさせていただきました。 クレカ決済サービスなど、この世に山程ある中で、当社があくまでも後発で参入する意味とは何なのか?何を我々は解決していくのか?というさわりでも理解いただければ幸いです。 PCI-DSSの無茶振り、そしてPCI-DSSに準拠することによるその効果 当社の新卒のクリスからの発表でした。新卒と言っても、彼はPAY.JPの前身のサービスであるpurecaの創業期から関わっているセキュリティエンジニアで、当時、大学生の身でありながらPCI DSSというクレジットカードを扱うセキュリティ基準の取得に多大な功績を上げたスーパーハッカーであります。 その視点からPCI-DSS取得の苦労話を少し。 どうでしたか? いかがでしたか?BASE社というと当社代表の鶴岡や、私、藤川がえふしんという名前で外に出させていただく機会が多く、どちらかというと経営とかマネジメントレイヤーの話が多く、あまりコアな技術の話はしてこなかったのですが、今回は当社のスタッフによるプレゼンテーションで、普段、取り扱っている技術についてのお話をさせていただきました。 我々はECと決済に関する技術について、インターネットのありとあらゆる技術を活用しプロフェッショナルチームとして携わっていくのが仕事ですので、もし、そのようなお仕事にご興味がある方は是非、お話しませんか? 全方位沢山の職種で、一緒に戦ってくれる方を募集しておりますので、お気軽にご連絡ください! 私の方が最初から面談に参加させていただきます! www.wantedly.com みなさんのこれからのキャリア設計が当社の技術やプロダクトに携わる機会を通じて、ご一緒できそうかについてお話しましょう! また、今後もBASE drink / BASE Talkを続けていきますので、是非カジュアルにご参加ください! BASE/ベイス - connpass
みなさんはじめまして。BASE CTOの藤川 ( id:f-shin )です。 僕たちが開発、運営している、BASEというネットショップ構築サービスの開発、オペレーションに関する技術記事や、僕らが普段どういう開発をしているか?について記述していこうと思っています。 簡単にBASEの紹介をさせていただきますと、ネットショップを作りたいなと思った方が、ネットの知識があまりなくても簡単にお使いいただけるサービスを提供しています。イメージとしては、PCを使いたいときに Mac を使えば、統一されたインターフェースデザインで迷わず目的を達成できるようになっていると思いますが、それのネットショップ版と考えてもらうとわかりやすいかもしれません。 一つの大きな特徴としては、BASEでショップを開設するとすぐにクレジットカード決済や、当社が入金確認代行をする銀行振込をお使いいただけるところにあります。 他のショップ開設サービスは、クレジットカード決済の審査で時間がかかってしまったり、銀行振込の入金確認が手間が超絶面倒だったりするのですが、BASEでは、今すぐ何かをネットで売りたいと思った時に、ちゃんとしたネットショップをわずか数分で作ることができます。 だから、ふと思いついたときにプレマーケティング的に一つの商品だけのショップを作ってもいいと思いますし、がっつり長期的にお店を育てていただくことも、もちろん可能です。あらゆるネットショップの運営シーンを簡単にしていこう言うのが、サービスの理念です。 こちらはBASEのトップページですが、お店向けのインターフェースになります。 thebase.in こちらのリンクから スマートフォン アプリをダウンロードいただけます。 スマートフォン アプリは、購入者様向けに提供していて、ショッピングモールの一種として育てています。 thebase.in 姉妹ブログに、RESTful API を使ってかんたんにクレジットカード決済ができるPAY.JPの技術ブログもありますので、こちらもよしなによろしくお願いいたします。こちらは Webサービス 、 スマートフォン アプリを開発する方がクレジットカード決済を組み込む際に簡単に導入いただけるサービスです。 blog.pay.jp また、開発に留まらず、全方位で人材採用をしておりますので、ご興味いただいた方はこちらの方からお気楽にご応募いただけるとうれしいです! www.wantedly.com