本記事は古い記事となっております。記事執筆当時と比べてサービスそのものの仕様は変更されており、本内容については無保証とさせていただきますので、本記事をご参考いただくのは自己責任でお願いいたします（本記事の内容については、お問い合わせいただいても対応しかねます）。またセキュリティやApps本来の機能の都合で、予告なく挙動が変更になるかもしれないのでご了承ください。 BASEと連携し、皆様が運営されているWebサービスに商品を販売する機能を追加したい！であるとか、Webサービスのユーザーに簡単に商品を販売する提供し、購入連携を実現したい！というご相談をいただくことがあります。 そのような連携をするメリットとしましては、 商品販売に関するあれこれを実装、維持、管理しなくてもよい。特にセキュリティ管理周りを外注したい！ 販売機能がコア機能ではないからプラスアルファの価値を提供したい お金の支払い周りや購入トラブルに関する問い合わせ等が煩雑すぎるから、そこをBASEに外注したい クレジットカード決済やキャリア決済などを提供したい などなど、BASEを活用するメリットがそのまま、皆様のWebサービスに組み込めることが考えられます。 このような取り組みに対する一つのご提案をさせていただけたらと思います。 BASEには、ネットショップに慣れてきたオーナー様が、あれをやりたい、これをやりたいというニーズにお応えするための機能拡張「BASE APPS」というものがあります。 その中に「広告効果測定」という機能があります。このAPPSを使うと、購入者様が商品を購入する際の購入完了画面で、任意のタグ、JavaScriptを実行する機能を提供することができます。 いささか裏技的ではありますが、この機能を流用し、Webサービスとの購入連携を実現しようというのがこの記事の趣旨となります。 購入フローは、こちらになります。 Webサービスは登録済み商品のページURLを通じてBASEショップにリダイレクトする（別窓が良い気がします） 商品の購入完了ページで、Webサービスに購入完了通知を送る。 Webサービスは通知を元に、BASE APIに購入情報を問い合わせて、サービスを提供する というフローです。 材料としては、 皆様のWebサービス BASEのショップ管理画面内にある「広告効果測定」APPS BASE API の組み合わせになります。 ■広告効果測定APPS 広告効果測定APPSは、BASEのショップ管理画面からご利用いただけます。 BASEの商品購入の完了画面に、ここに書いた任意のHTML / JavaScriptが出力されます。iframe内に出力されるのでWebページ経由のWebhookとして皆様のサービスに通知を送ることができます。 購入完了画面のページのURLには、ショップのIDが入っているのでリファラーもしくはJavaScriptでパースすることで、どのお店からのリクエストかも判別可能です。 （なお、購入画面のURLはどこかのタイミングで変わる可能性がありますので、その際は、下記のdevelopers登録のアドレス宛に一ヶ月前ぐらいには、連絡いたします） ■BASE APIを使うためには プラットフォーム様がBASE Developersからアカウント申請をお願いします。 developers.thebase.in BASE APIの利用申請が承認された後、BASEが提供するOAuthログインのコードを書くと、皆様の管理画面から商品を売りたいユーザさんに対して、BASEショップとの連携機能を追加することができます。 ユーザさんからOAuthを通じてBASEショップのアクセス権が移譲されることで、 商品登録 / 削除 / 在庫数の変更 購入者情報の取得 などができるようになります。これらの処理を自動化することで、商品購入と連携して購入者様にサービスを提供することができるようになります。 （そのため、商品を売りたいユーザさんには予めBASEショップを開設いただくことが必要です） ■本機能実現についての検討事項 以上のようにシステム連携自体は簡単にできますが、いくつか検討すべき事項があります。 エンジニアをかかえるWebサービス様が販売責任を負う形で商品を販売されるのであれば簡単です。 それに対して、皆様のユーザーにこの機能を提供しようとすると、誰が何をするか？という部分が少し煩雑になります。 検討部分として、整理すべきポイントは以下のようになります。 BASEアカウント保有者 = ショップオーナーさんの責任 - 特商法の記載（販売主体 / 返品責任は誰が追うか？） - お金の流れ（BASEから振り込むので済むなら簡単だけど...） - 購入者情報の管理（個人情報管理） システム連携に必要な作業 - 広告測定appsの設定 - 連携タグの設置 API連携して、サービス提供に必要な機能 - 商品の登録、削除、更新 - 購入者情報の取得 （ その他 APIのドキュメント ） 本文章の内容としては以上になります。 今後、より高いニーズに応じて機能追加も検討していこうと思っておりますが、ひとまずこちらをご検討くださいませ。

BASE本社で12月19日にPHP Wayというイベントを開催しました。 PHPで成長したWebサービスを他の言語に移行させる話題を見ることがありますが、PHPを使い続ける企業がどのようなことを考えて、その選択をしているのか？ということを共有するイベントでした。 どこか自信を見失いがちなPHPの利用について、適切に状況判断するための材料を共有し、PHPを使うサービスにエンジニアとして関わっていくにあたって無駄に悲観的に思わないようにするのをイベントのゴールとして設計しています。 （左からコネヒトCTO島田さん、BASE藤川、サイバーエージェント SGE CTO 白井さん） BASE社の発表資料はこちらです。 20171219 / phpway / BASE,Inc. from 真一 藤川 一度採用した開発言語、実行環境やフレームワークは、一定のライフサイクルの後に、それを採用していることそのものが技術的負債と呼ばれるようになりがちです。これは技術の進化やセキュリティトレンドが存在する以上、インターネットに繋がるシステムとして避けられない部分でもあります。 一方で、お客さまやお客様のお客様に向けてサービス性を実現するために「維持する」という行為もエンジニアリングという視点では重要で、その部分がネットでは軽視されがちかなと思う風潮もあります。その中で、PHPはちゃんと進化していて、長く使えるという面でも柔軟性が非常に高い言語だと思います。 このような部分は、もはやベテランは当たり前すぎて語らないってことなのかもしれませんが、キャリアの浅い若手エンジニアだと日常のアテンションについつい関心を持っていかれがちになって、大切なことを見失うこともあるかなと思うこともありますので、あえて当たり前のことを共有しておくのも大切かと思いました。 ネットで発言する開発者が、全員がサービスのような毎日継続的に開発をする人だけじゃないですし、その場その場で新しい技術を使い分けていくことで自身の商品性を保ってる人たちもいると思うので、新しいものは後出しなんだから素敵な仕様なのは当然であるという１つの価値観だけで開発技術を捉えるのではなく、それぞれの論点をちゃんと整理して一番大切なものは何なのか？が共有できるといいなって思いました。 そういう意味で、今回ご登壇いただいたコネヒト CTOの島田さん、サイバーエージェント SGE CTOの白井さんにはWebサービスやソーシャルゲームという、一度当たるとライフサイクルが想像以上に長いサービスを運営していくにあたっての技術選択基準についてお話いただきました。そこにPHPの選択も決して間違っていないということがご理解いただけると幸いです。 BASE社は、今後も「ちゃんとPHPを使うこと、あらゆる技術を適材適所で使うことを身に付け、時代の変遷に対して正しく技術選択ができるエンジニアを成長させ、どこのWebサービスの会社にでも転職できるエンジニアを育てる」ことを社員のスキル形成を前提として、彼らがそれでもBASE社で働く喜びを持ち続け、共に戦っていけるように、しっかりサービスを成長させていきたいと思っています。 関連リンク： コネヒト CTO 島田さんの記事 tech.connehito.com サイバーエージェント SGE CTO 白井さんの発表資料 ameblo.jp

初めまして、BASE iOS エンジニアの大木です。 6/5-6/9の日程で行われたWWDCに参加してきました。 初参加だったのですが、いつもの業務から離れてiOSの技術的な内容を聞いたり同じiOSエンジニアと議論したり大変有意義な時間を過ごせました。 発表内容は他の方やメディアがまとめていると思いますので、ここではそこにはあまり触れず雰囲気をお伝えできればと思います。 会場について 宿泊先 初日 セッション Lab The Bash トラブル 荷物検査の後、iPhoneを失くしかける ホテルの差し込み型のカードキーでドアが開かなくなる ホテルのWi-Fi/ポケットWi-Fiが繋がりにくくなる まとめ 会場について 今回はSan Franciscoではなく、San JaseのMcEnery Convention Centerで開催されました。 前日から会場にチェックインできるので、夕方に現地に着き宿泊先に荷物を置いてから会場に向かいました。 もっと前から現地に行き観光に行った方もいたようで、若干羨ましかったです。 会場の外でチェックインして、バッチをもらいました。 前日に備え腹ごしらえをするために歩き回るGuys 宿泊先 Appleからメールで送られてきた予約フォームにあった会場に近いThe Fairmontというホテルに宿泊しました。 会場へはゆっくり歩いても、徒歩5-10分以内につくので大変助かりました。 http://www.fairmont.jp/san-jose/ www.fairmont.jp ホテル下にMUJIも! Tech Museumも近い！ Singleで予約してもベットは2つ！ 初日 前日の腹ごしえの時に徹夜しなくても入れるという情報をもらったので、宿泊先から会場へ歩いていけることもあり、明るくなってから列に並びました。 一応朝4時ごろに目が覚めたのですが、列に並び始めたのは6時でした。 建物は朝7時くらいに開場され、スタッフに拍手で迎えられました。 入場すると朝食が振舞われていたので食べつつ、ホールが開くのを待ちました。 真ん中の一番後ろの席を確保 Keynote、Platforms State of the Unionを観た感じ、VRKit/ARKit/Core ML、App StoreのリニューアルやXcode/Foundation/Swiftの改善などアプリを作るための基礎となるものの発表が多かった気がします。 また、Keynote後のランチ中に、WWDCアプリを確認するとセッション内容が更新されていたので、Keynoteの内容についての感想やセッションどこに行くかなどについて話したりしました。 ランチボックス セッション 自分は初日の発表を聞いて下記のことが気になったのでそれらのセッションを中心に回りました。 JSONマッピングのためのDecodableプロトコルって、ダーティーなJSONでも対応できるの? ARKitでマーカーっていらないの? 認識性能は? Core MLって端末上で動くらしいが、機械学習の学習済みモデルってどうインポートするのか? また、画像認識や自然言語処理の特定機能の処理にそれがどう関わってくるのか? UIKit周りのアップデート 動画とスライド、あとサンプルコードもいくつか公開されているので、気になる方はチェックしてみると良いかと思います。 Design and Development Videos - Apple Developer Lab セッションとは別に、Apple社員に質問ができるLabというのもありました。 デザイン系やAppStore系のLabは予約が必要なので早起きする必要があります。 予約フォームは毎朝7時以降に専用のページにアクセスするのですが、私は残念ながら予約できませんでした。 3つほどエンジニアリング系Lab(それしか回ってない)を回ったのですが、UIKit and Collection View Labは、結構並びました。 いくつかした質問紹介すると、 Q. CollectionViewを入れ子で使うことが多いのだけど、これってパフォーマンス的に問題ないの? A. あまりよくないね。CollectionViewは一つにするべきだよ。 このViewはレイアウトを色々カスタマイズできるので、 必要な種類のCellを用意してセクションを分けたりしながらレイアウトするべきだよ Q. UITableViewライクなレイアウトを作成することがよくあるのだけど、 パフォーマンスの観点だとセパレータってDecorationViewで作るべきなの? CollectionViewCellの要素として作るべきなの? A. 今ってどっちで作ってるの? (CollectionViewCellの要素として作ったコードを見せながら) 全然これで問題ないよ！ Cell初期化の時に作ってるみたいだしね あと、ApplePayボタンに関して、利用ケース別にどのボタンタイプを使うべきか質問をしにいった時に、 自分が実装したAutolayoutのコードを見て、Appleのエンジニアが Human Interface Guidelines を確認していました。(幅と高さが最低いくつ必要かというのを確認してたっぽい） The Bash 最終日前日には、酒が飲めたりライブ見たり遊具ありのパーティーがありました。 会場近くの屋外広場で開催されてました。 開場直後のステージ Fall Out Boyが演奏してました。チケット手に入れる手間もなく観られてよかったです！ https://itun.es/jp/pwyTb www.setlist.fm トラブル 荷物検査の後、iPhoneを失くしかける 荷物検査の後、ゲートに移動したらiPhoneがないことに気づきました。 荷物検査のところで失くした場合、係員に伝えると探してくれます。 iPhoneの場合、指紋認証でアンロックして写真アプリを開いて、自分の写真を見せるように言われるので、セルフィーなど一枚残しておくと良いです。 その時、別のiPhone持ちながらiPhone失くしたって伝えたので、「持ってるじゃない」言われたりしました。 ホテルの差し込み型のカードキーでドアが開かなくなる Fairmontホテルは、差し込み型のカードキーなんですが、滞在2日目の夜くらいから開けにくくなったのでフロントにいって交換してもらいました。 その時、ID(旅行客の場合パスポート)を見せるように言われたため、パスポートは肌身離さず持っておいた方が良いと思いました。 ホテルのWi-Fi/ポケットWi-Fiが繋がりにくくなる WWDCの会場にいる場合は良いのですが、ネットに繋がらないと色々辛くなります。なのでプリペイドSIMを出発前か現地到着後に購入しておくと良いと思いました。 現地調達する場合、T-MobileストアとかSIMを購入できる場所がどこかにあるはずなので見つけて購入すると良いでしょう。 下のような感じで色々と辛くなります。 Labの予約ができなくなる 宿泊先が遠いのに、Uber/Lyftが呼べない はぐれる まとめ 滞在中は、サンノゼ空港から宿泊先のホテルまで、$26と吹っかけられたり、(スルーしてLyft使いました$15.5) 下記のイベントに参加したり www.meetup.com スポーツバーで、偶然NBAの試合見たりしました。 Warriorsが逆転勝利して盛り上がってました！ Geo Blocked | NBA.com 色々ありましたが、WWDCに参加できて本当によかったと思います。 まだいったことがない人がいれば是非参加することをオススメします。

BASE CTOの藤川です。 リブセンスさんが運営されている転職ドラフトという転職サイトで、全員のプロフィールを読んでいて薄々気がついていたことに改めて気がつかされたのですが、BASEの方でサーバサイドに使っているメインの技術はCakePHPというフレームワークでありPHPの技術なのですが、 新卒の就職先がRubyを使っていて、今、25〜27歳ぐらいになっている若手エンジニアにPHPの経験がない人が増えている！ という大きな問題にぶちあたりました。我々は転職いただく方の前職については、いくつか期待している流れがあります。決済、EC視点ではEC-cubeなどでPHPを扱っていた会社からの転職組というのが重要な人材供給源だったりするのですが、それ以外に「モバイル、スマホアプリ、最強のUX」というスタートアップ的な視点においては、モダンなスタートアップのサービスに携わっている経験は魅力的です。（別にそれだけで採用したりはしませんが） つまり第二新卒などの若手エンジニアを採用しようとすると、仕事道具としてPHPを今更学んでいただくところから始めなくてはいけません。 最近、Railsで作られてるマストドンを個人で運営している関係で、がっつりソースコードを見ていますが、ビジネス要求に照らし合わせると、ぶっちゃけRailsもCakePHPもできることはあんまり変わらないわけです。 もちろんRailsは高い生産性を発揮する素晴らしいプロダクトで、作っていて楽しいWAFだとは思いますが、スケールしたシステムにおいて抱えている問題解決の会話において、言語やWAFの重要性は、割とどうでもよくなってくる。 つまり、起きる問題が言語の問題ではなく、アーキテクチャに起因することの方が多いので、日々の問題解決において話している内容は言語の話ではありません。 マストドンがRailsなのも、改めて考えてみれば、丁度10年前のツイッターと同じなわけで、このプロダクトは、N+1問題を抱えたタイムライン型プロダクトとして超勉強になって、あぁこうやってタイムラインは遅延してたのねということが実感できます。 ですが、Twitterのその後が脱Railsをしたことも加えると、成長するサービスにおいてフルスタックなフレームワークが寄与する範囲は多くはないかなと思うわけです。 （それは僕らの問題としてCakePHPにも全く同じことが言えるわけです。つまり僕らは僕らでCakeに依存してはいけないわけですね。やっぱり生産性の高いWAFはどこかで効率性を引き換えに利便性にロックインされてしまうので地味に脱するのは難しいんですよ。） またクラウドの発達でAWSやGCPなどを素早く扱えることの方が重要性を増してきて、Web開発言語はどこかグルー（糊）としての役割のほうが大きくなってきました。 ということで、我々としては20代の若者に対しては、言語を学ぶことが重要なんじゃなくて、Webをとりまくアーキテクチャをしっかり知っていくことが大切なんだ！という言葉と、メルカリさんだってPHPでしょ？SlackもFacebookもPHPでしょ！？成功するサービスにPHPは少なくないんだよ！というポジショントークを交えながら、「正しいWebエンジニアのあり方」を説くわけです。 そして、その先にある、「じゃあ、2017年の段階で、PHPを学ぶにはどうしたらいいですか？」という質問に答えるための記事がこの記事です。 とりあえず、なにやら最新情報はないものかとTwitterとマストドンに投げてみました。 内定者にphpのいい本ありますか？と聞かれて、うずらさんのYAPCの資料を検索してくださいとお伝えするなど。 — えふしん (@fshin2000) 2017年4月26日 「うずらさんの資料」とはこれです。 ■半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情（5.6対応）（YAPC公式サイトの紹介） 半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情（5.6対応） - YAPC::Asia Tokyo 2014 2014年のYAPCで、PHPネタでベストトーク賞を取るという伝説のプレゼンテーションですね。 YAPC::Asia 2014 - 半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情 from Junichi Ishida その他、教えてもらったURLを貼っておきますね。 まだマストドンのtootの著作権がはっきりしてないので基本URLだけにします。creative commonsなどで再利用権を主張できるようになるといいですね！ ■PHP The Right Way ja.phptherightway.com ■短気なプログラマのためのPHPUnitクックブック https://leanpub.com/grumpy-phpunit-jp ■パーフェクトPHP（書籍） gihyo.jp ■効率的なWebアプリケーションの作り方 ~PHPによるモダン開発入門（書籍） https://www.amazon.co.jp/%E5%8A%B9%E7%8E%87%E7%9A%84%E3%81%AAWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-~PHP%E3%81%AB%E3%82%88%E3%82%8B%E3%83%A2%E3%83%80%E3%83%B3%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E5%B0%8F%E5%B7%9D-%E9%9B%84%E5%A4%A7/dp/4774150827 パーフェクトPHPを書かれた小川さんの本 ■PHP公式マニュアル。 https://secure.php.net/manual/ja/index.php ふつうに良い。おおむねこれで足りる。 ■PHP公式マニュアル https://secure.php.net/manual/ja/appendices.php うずらさん談：「php.netは、付録という名前の本編を全部読んでいただきたい。」 ■PHP入門（とほほのWeb) http://www.tohoho-web.com/php/ ■PHP The Wrong Way http://www.phpthewrongway.com/ うずらさん談：「ひねくれた（？）人なら、the wrong wayもよむべき（？）」 道具としては若干枯れた印象も強いPHPですが、歴史も長い言語なので、それ故にモダンな開発言語で意識されるような「正しく扱うスキル」が求められます。 他にもオススメの本やWeb記事がありましたら、是非はてブで教えてください！ 追記 ：この記事を読んでいただいた方から、おまえPHP7のやる気ないだろ！って感想をいただいたので、全然そんなことないですよ！ってことを書いておきます！ 今回の話は、若い人がPHPをネガティブに捉えたまま近寄らない事態になるのを防ぐために、あえてそっち側に寄せて書いてあります。それ以上に今回、記事を書いていて思ったのは、書籍などの大きな情報発信について、2014年ぐらいを境にPHPに関する情報発信が途切れているイメージを持ったこと。 それでは「新しい人」が入ってこないのも当たり前なので、盛り上げていかないと！自分たちもPHP7.xのムーブメントは大切なことなので、情報発信も含めた技術的チャレンジをちゃんとやっていき、あわよくばPHPを使っているエンジニア業界を牽引できるようにしていきたいと思っています！そういう部分も含めて、一緒に将来を作っていっていただける方を募集しております！ www.wantedly.com

こんにちは。BASEでAndroidアプリ開発をしている鈴木です。 https://twitter.com/G_devi 突然ですが、デザイナーからこんな感じにしてくれと頼まれたことはありませんか？ GridLayoutですね 一番上のヘッダー部分が全幅なうえ、Grid部分の余白を全部同じサイズに調整するのが地味に手間がかかる。 どうせならヘッダーも同じサイズの余白をつけるか、Gridの左右は半分でもいいじゃん・・・と思うのは実装者だけですね。はい。 というわけで、楽に対応できるItemDecorationを作りました！ どうやってるのか 簡単に説明すると RecyclerVIewの左右に設定したい余白の半分のpaddingをつける。 もう半分は子Viewで RecyclerViewのclipToPaddingをfalseにする。 子Viewにpadding領域はみ出してもいいよ設定 全幅のViewの左右Marginに設定したい余白の半分の負数を設定する。 お言葉に甘えてはみ出すよ GridItemの左右に設定したい余白の半分のpadding(DecorationでのoutRect)をつける。 GridItem間はお互いの余白を足して設定したい余白になる 中身 ItemDecoration public GridDecoration( int sideMargin) { this .halfMargin = sideMargin / 2 ; this .halfMinusMargin = - 1 * halfMargin; } @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { int adapterPosition = parent.getChildAdapterPosition(view); GridLayoutManager lm = (GridLayoutManager) parent.getLayoutManager(); GridLayoutManager.SpanSizeLookup ssl = lm.getSpanSizeLookup(); int spanCount = lm.getSpanCount(); if (ssl.getSpanSize(adapterPosition) >= spanCount) { // 全幅（ヘッダーとか） ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams(); params.setMargins( this .halfMinusMargin, params.topMargin, this .halfMinusMargin, sideMargin); view.setLayoutParams(params); return ; } outRect.left = this .halfMargin; outRect.right = this .halfMargin; } RecyclerViewへの設定 recyclerView.setClipToPadding( false ); recyclerView.setPadding( halfMargin , parent.getPaddingTop() , halfMargin , parent.getPaddingBottom() ); recyclerView.addItemDecoration( new GridDecoration(sideMargin)); こんな感じです githubに置いたので他の部分も見たい人はぜひ GridDecorationTest/GridDecoration.java at master · g-devi/GridDecorationTest · GitHub 失敗例 // 上で全幅は除外してる想定 // 左端のView if (isLeft(ssl, spanCount, adapterPosition)) { outRect.left = sideMargin; outRect.right = sideMargin / 2 ; return ; } // 右端のView if (isRight(ssl, spanCount, adapterPosition)) { outRect.left = sideMargin / 2 ; outRect.right = sideMargin; return ; } outRect.left = sideMargin / 2 ; outRect.right = sideMargin / 2 ; パッと見、うまくいってると思ったが・・・ よくこのGridのViewに横幅に合わせた正方形の画像を置いて、下にテキストを表示するようなレイアウトがありますよね？ それを当てはめてみると・・・ 2行目の4つのViewを見てください。 オレンジの部分が横幅に合わせた正方形のViewなのですが、左右端と間の2つでサイズがズレてますよね？ これはoutRectを設定したことで左右端のViewの描画幅が狭まっているためです。 よく利用させていただいているこのアプリを使うと分かりやすいです。 play.google.com spanCountとspanSizeを設定してる時点で幅は決まっており、その範囲内でどれだけ余白をもたせるかのoutRectですね。 ってことで、Gridの全ViewのoutRectのleft, right合計が一緒でないといけないためoutRectだけでの設定は物理的に無理でした・・・ やっぱりRecyclerView自体にpadding設定しなきゃってことで上の対応になったわけです。 補足 上のコードだけだと、いわゆるdividerを入れていないため上下のViewがくっつくのでその辺はお好きに。 サンプルだととりあえず "outRect.bottom = sideMargin" を入れて表示してます。 とりあえずItemDecoratoinだけで設定してみたかったので、githubのコードではItemDecoration内でRecyclerViewのpaddingを設定したりしてますが、実際に使うときはRecyclerViewをカスタムするか、もう一個上でDecorationのセットも含めて実行してくれるものを作ったほうがいいかと思います。 レイアウトxml側でRecyclerViewのclipToPaddingやpaddingLeftなどを設定したり、全幅のものにマイナスマージンつけたりしてもいいのですが、作る度にそれぞれ設定すると手間なのでItemDecoration上でできるようにしました。 手間でなければお好きなほうで！ 最後に そのうち、GridのViewがCardViewのパターンについても書きます。 旧バージョンを考慮するとCardViewの周りにshadowのための余白がつくので調整が必要になりますからね・・・ zeplinとかでの指定ではshadowを無視したCardViewの端から画面端までの余白とかになりますからね・・・ BASEではAndroidエンジニアも募集しているので、気になる方はぜひ！！ www.wantedly.com

SREチームの小林（し）です。 BASEでは独自ドメインで運用されているショップさんでHTTPSで表示できる機能を実装しました。 「BASE」が独自ドメインのSSL証明書の無料発行・自動管理を開始　‐常時SSLで安心安全なネットショップ運営を 去年の3月にサブドメインで運用されているショップさんに関しては全てHTTPS化は実装していましたが、独自ドメインで表示されているショップさんはHTTPの表示のままでした。今回から独自ドメインを利用されているショップさんもHTTPSでアクセスが可能となり、全てのショップさんでHTTPSでのアクセスが可能となります。 今回の機能ではHTTPSアクセスに必要な証明書の取得は無料で行い、かつ管理は僕たちがやりますのでショップさんの方で証明書の取得・管理は不要です。 利用方法などはマニュアルにお任せし、今回は裏側の実装について紹介します 証明書 今回証明書を発行するにあたり、 Let’s Encrypt を利用させていただきました。Let’s Encryptは去年サービスが開始された無料で証明書が取得できるサービスです。 ただ同時に何枚も無制限に取得できるわけではなく、いくつかの制限が存在しています。逆に制限さえきちんと守れば同じアカウントからであれば証明書を複数枚取得することは許可されているようです。（運営に問い合わせ済み） この Let’s Encryptから発行された証明書を使うことで、BASEの独自ドメインのショップをhttpsでアクセスすることを可能にしています。 外部サービスとの連携 取得はAmazon SQSと連携した取得専用のデーモンが自動で行なっています。 Let’s Encryptは初回はACMEアカウントと呼ばれる専用のアカウントが必要です。このアカウントが証明書を取得する際に認証として使われます。 PHPcon2016で 発表した資料 でもお話しましたが、BASEのサービスはロードバランサーに複数台のnginxを使っています。今回はnginxの設定を一部変更し、Let’s Encryptからのacme challengeと呼ばれる証明書取得確認のアクセスがきたら、取得専用のサーバにプロキシするようにしました。 取得専用サーバではacme challengeアクセスの受け皿としてドメインごとにディレクトリを作成しレスポンスを返しています。直下で認証が行われると証明書を取得するための一連の動作が専用のデーモンによって行われる仕組みです。 nginxへの同期と証明書の読み込み Let’s Encryptの証明書は取得後「/etc/letsencrypt」ディレクトリに保存されます。これらをバランサーとして動作しているサーバに定期的に同期を走らせています。 nginxでの証明書読み込みは ngx_mruby をnginxにモジュールとして組み込むことで動的に行なっています。これにより同期された証明書がアクセスのたびに動的に読み込まれ、nginxを停止することなく、またnginxのメモリを圧迫することなく独自ドメインでのHTTPSアクセスができるようになりました。 まとめ HTTPSはSEOでの効果もあるということなので、今回実装した機能はショップ運営の大きな助けになると思います。 独自ドメインを使っている方はぜひ利用してみてください！ BASEでは一緒にネットショップを開発・改善するエンジニアを募集してます。ご興味のある方はぜひ遊びにきてください。 BASE株式会社：採用情報

こんにちは、iOSエンジニアの遠藤（秀）です。 3/2（木）〜 3/4（土）の３日間に渡って開催された世界的なイベント「 Try! Swift 2017 」に参加してきました。 ２日目のセッション「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（土）の３日間に渡って開催された世界的なイベント「 Try! Swift 2017 」に参加してきました。 １日目のセッション「アプリを新次元に導く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の２種類があります。 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の２つのモードがあります。 上記の説明だけで、あっさりとしたものでした。機能自体はiOS8から導入されていて、通知センターからアプリケーションへと送客できるので、流入経路を増やす意味でも有効ではないかと思います。 実装方法については、こちらで詳しく紹介されています。 https://techblog.yahoo.co.jp/ios/today-widget/ 他にも流入経路を増やす方法として、２日目のセッション「 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万通ぐらい行くことを想定しても、ゴールドプランの方がお得な使い方もあるように思えます。 そこで、超過料金を組み合わせたメール送信数とプラン別料金のグラフを書いてみました。 メールの送信数が増えた時に、より単価の低い上位２プランの方がお得感があるのは当然のこととしても、上位２プランのうちゴールドとプラチナを比べた時に、下位に属するゴールドプランの健闘が目を引きます。 というのもゴールドのメール送信単価は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 です。 使い方 １．このExcelシートを開いてください。 印刷するのにVBAを使いますので、マクロを実行する許可をしてください。（Office365だと、アクティブコンテンツの実行許可というのが必要のようですね。） このファイルには、４つのシートがあります。 シート名【CSV】・・・BASEから取り込んだCSVデータを読み込むシートです。 シート名【pivot】・・・CSVデータを購入単位で扱えるように購入額や送料を集計しています。ピボットテーブルで構成された中間データ用のシートです。 シート名【items】・・・納品書の商品名を差し込むのに使う商品情報を並べています。少しExcel用のテクニックにあわせて作ってある中間データ用のシートです。 シート名【output】・・・納品書の印刷レイアウトの帳票です。ここの中身を編集して、よしなに納品書を作ることができます。 　　 なお、印刷実行時に「output」のA1に白い文字列でページ名を書いているので、A1セルだけは使わないようにしておいてください。（HTMLで言うinput type = hiddenみたいな使い方をしています） ２．【CSVシート】に、BASEからダウンロードしたCSVを読み込みます。 最近まで知らなかったのですが、ExcelでCSVを取り込むときは、CSVファイルを直接開くのではなく、「データ」メニュー　＞「外部データの読み込み」から読み込むべきだったんですね。Excelで、CSVを直接開くと、数字だけのIDや、日付けのデータが省略されてしまったりして、かなり面倒くさいことになってて、Excelつかえねーなーと思ってましたが、僕が無知なだけでした、MSさんすいません。（ただファイルメニューじゃなくて、データメニューに置かれると気が付かないよね） 「外部データの読み込み」を使うと、そのセルは、文字列として読んだり、データの区切り文字を細かく設定することができるので、セルの内容が、桁数の多い数字として省略表記されてしまったり、勝手に改行されて面倒くさいなどと言った現象を回避することができます。 この機能を使って、「CSV」と言うシートに読み込んでください。A1セルから読み込みます。 BASEのCSVを読み込むコツは、「注文ID」をテキストデータとして読み込むところです。 また、BASEのCSVは、あたりまえのことではありますが「カンマ区切り」のファイルなので、データの区切り文字はカンマに設定します。 ３．【pivot】というシートと、【items】というシートの行数を【CSV】で読み込んだデータ量にあわせて変更してください。 この２つのシートは、BASEのCSVを【CSV】シートにA1から、読み込んでもらえれば、自動的に集計をしてくれるようになっています。 【pivot】は、購入ごとの販売額を算出しています。よくBASEのCSVは、送料が重複して困るという意見がありますが、こちらのテーブルは送料の重複を弾いたものを算出しています。つまり、購入の合計額を計算できるようにしてあります。 【items】は、商品ごとの明細を算出しています。納品明細に商品を複数個並べるために、少しExcelのテクニックを使ってるシートになります。 どちらもうまくデータが表示されてなければ、正しい納品書を印刷することはできません。 で、調整が必要な部分は、読み込んだCSVの行数はその都度変わると思うので、その部分に関するものになります。アバウトに１００レコードぐらいは自動集計するようにしてありますが、もっと沢山の購入情報を扱う場合は、適宜調整が必要です。見よう見まねでできるようにと公開しているつもりではございますが、この操作にExcelの基礎的な経験が必要になります。 なお、ピボットテーブルを活用すると納品書だけじゃなくて、一番購入いただいているお客さんを抽出したりランキングしたり、などいろいろ応用が効きますので、ピボットテーブルはExcel応用活用のキホン中のキホンなので、少しわかりにくいけど我慢して学ぶだけの価値のある機能ですのでオススメです。僕も、自分の家計簿、出費分析をするために勉強しました。 ４．「開発」タブ＞「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シートの印刷したい枚数に変更します。じゃないとどんどん１８枚まで印刷しちゃう極悪仕様です。 このシートを使ってくださる人が増えそうだったら【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