Web Design Articles

  • 1814

StripeのSubscriptionのhookについて

こんにちは、のすけです。クレジットカード決済プラットフォームStripeの新しいバージョン。と言っても数年前のアップデートですがによって、機能がいろいろ拡充されてますよね。ただ機能が多過ぎてドキュメントを読んで仕様を理解するのも一苦労。 その中で、便利なサブスクの機能なのですがかなり柔軟に料金設定ができるのですが、既存のシステムにもサブスクの管理がある場合 重複して管理しなくてはならなくなります。例えば他の決済プラットフォームも併用している場合には、仕方なく、自社システムにも サブスク管理の仕組みを作って、Stripeのサブスクといい感じに連動させる必要があるかと思います。 それで、サブスクの入会、退会はどうやって検出したらいいの?という問題にぶち当たるのですが。そこはStripe、イベントをhookする仕組みが用意されています。着信する Webhook を使用してリアルタイムで更新を取得する | Stripe のドキュメントただ、いっぱいイベントあるんですよね。。サブスクの登録、キャンセルはどのhookを使えば、、、 'customer.subscription.created'を使ってみる サブスクが登録された時、このイベントが走ります ですのでこちらをhookするのが正攻法かと思います。 ただ、自社のサブスク管理システムとの連携の際に、 契約されたサブスクがどのサブスクかを識別するためには、あらかじめ登録時に metadataに識別のためのプランidなどを仕込んで置く必要があります。 ただ、Stripeの管理画面の商品設定画面ではproduct(商品)やprice(価格)にはメタデータをあらかじめ設定できるのですが サブスク契約(sub_xxxx)は契約時に作成されるので 事前にメタデータを仕込むことができないっぽです。 なので、やり方としては 登録は例えばコーディング不要のStripe既存のcheckout sessionの仕組みを使う場合 どうすればいいのかと言うと checkout.session.create時に subscription_dataというパラメータを設定できるので、そこのmetadataに 自社のサブスクを識別する識別子を設定しています。 これで、例えば'invoice.payment_succeeded'をhookして、渡されたJSONデータをパースすると どのサブスクか判別できます。 'invoice.payment_succeeded'での検出 Stripeでの支払いの際には(トライアルの¥0決済含む)必ず発行されるイベントに invoice.payment_succeeded'があります。 こちらをhookすることでサブスクの登録と継続決済の検出ができるのでいいかなと思います。 なぜなら、billing_reasonという項目にサブスクの状態が入っているからです 登録時には"subscription_create"が、継続決済時には"subscription_cycle"が入ってくるので こちらを識別する方法があります [...]

  • 1868

PhpStorm(Intellij)でjavaコマンドを実行するとバージョンが違う

別のターミナルを開くしかなさそうです。ここで、Issueが出てますが、みんなイライラしています。 intellij-support.jetbrains.com環境変数(PATH)のJAVA_HOMEが「C:\Program Files\Java\jdk1.8.0_241」になっていてもPhpStormで開くと openjdk 11.0.3 2019-04-16 OpenJDK Runtime Environment (build 11.0.3+12-b304.10) OpenJDK 64-Bit Server VM (build 11.0.3+12-b304.10, mixed mode, sharing)cmd.exeで開くと [...]

  • 1870

Nuxt.jsでAdobeのTypekitを使う方法

ネットを探しても無かったので載せときます。 サブセットの話 日本語のフォントというのは、アルファベットに比べて文字数が多いため常用漢字だけに絞ってパッケージングし直したりしているんですが。(サブセット化) 最近ではダイナミックサブセットといって、そのページで使われている文字だけを動的にサブセットする方法が流行っており、AdobeのTypekitしかり、FontPlusしかりTypeSquareしかりです。 ただ、ちょっと問題があってHTMLで作られたサイトなら簡単なのですがVue.jsなどJSによってレンダリングされているサイトの場合は、各社がサンプルで提供している方法ではフォントが適用されません。 なぜなら、JS描画なので、初期ロードのHTMLには何も文字が描画されていなため、0文字のサブセットになってしまうようです。 ダイナミックサブセットと Web フォント提供 JSでのレンダリング後にサブセット化すれば解決 各社ではJSのAPIを用意してくれているので、フォントのロードタイミングを工夫することで解決するというわけです。結論から言うとこれでいけました。 nuxt.config.js または、各ページのheadセクションでScriptをロード。 「xxxxxxx.js」は自分のtypekitのidが入ります。 head: { script: [ { src:'https://use.typekit.net/xxxxxxx.js'} [...]

  • 1871

プロジェクト・アリストテレス

googleの収益の根源(生産性を高める方法)を分析したけど 結果ほぼなにも関連がなくて すごい人材がいるとかでも無くて 唯一あったのが、社員の安心感「心理的安全性」だった。 ってやつ。 googleのアリストテレス プロジェクト rework.withgoogle.com グーグルが突きとめた!社員の「生産性」を高める唯一の方法はこうだ(小林 雅一) | 現代ビジネス | 講談社(1/4) だらか、彼らはマインドフルネス(坐禅)とか、精神を安定させる方向も試しているわけだけど。あと最近あった記事だとこれ 瞑想が子どもたちの成績を向上させてストレスも軽減させることが可能と判明 - GIGAZINE で坐禅って寺なんだけど。 「禅寺」って日本にしかないのは、あまり知られていない。スティーブジョブズが坐禅してたというのも、日本の禅マスターに出会ったからで。仏教はインド発祥だけど、それが中国で熟成されて身体作法としての「禅」が生まれて。それが日本に渡った。 その後、中国ではどっかの王様がほぼ寺を壊したから、もはや日本にしか禅寺はないという。。 [...]

中華で始める Arduino入門日記6 LEDをロウソクのように瞬かせる

こんにちは、のすけです。 中華で始める Arduino入門日記の6回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回はブレッドボードを利用して、LEDをチカチカさせました。 hollywis.hatenablog.com 今回はなんと!チカチカではなくほわほわとロウソクのように瞬かせてみたいと思います。 できるんですねぇ、そんなことが。チュートリアルの5章 PWMになります。 では早速やってみましょう。 利用しているキットに近い奴は⇩ Arduinoをはじめよう 互換キット UNO R3対応互換ボード 初心者専用実験キット 基本部品セット20 in 1出版社/メーカー: vershipメディア: おもちゃ&ホビーこの商品を含むブログを見る アナログ値(PWM)を扱う 指定したピンからアナログ値(PWM波)を出力することができるようです。 何が嬉しいかと言うと、LEDの明るさや、モータの回転スピードなどを調整する時に利用できるとのこと 制御できる段階は256段階(0~255)で、かなり細かく制御できるようですね。 ただし、制御できるDigital I/Oピンは決まっているそうで、3,5,6,9,10,11ピンだけだそうです。 利用方法 analogWrite関数というものが用意されています 実行されるともう一度analogWriteをしたりするまで、安定した矩形波が出力される模様。 周波数はだいたい500Hzだそうです。 ちょっとよくわからないので、ググりました。 矩形波(くけいは、Square wave)とは非正弦波形の基本的な一種であり、電子工学や信号処理の分野で広く使われている。 理想的な矩形波は2レベルの間を規則的かつ瞬間的に変化するが、その2レベルにはゼロが含まれることも含まれないこともある。 方形波とも呼ばれる。 by Wikipedia うん。まだよくわからないけど。 電気を瞬間的にオンにしたりオフにしたりを規則的にすると矩形波になって オンの時間とオフの時間を調整することで、電圧を擬似的に出力の最大値から256段階に分割していると だから、抵抗とかを調整しなくても、LEDを明るくしたり暗くしたりができると。 そんな理解でいいのかな? なるほど便利そうだ。 回路 実は前回と一緒です。9ピンを使います。 緑のジャンパーコードを差した状態を利用します。 [...]

中華で始める Arduino入門日記5 ブレッドボードLチカをやる

こんにちは、のすけです。 中華で始める Arduino入門日記の5回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回はArduinoのプログラミングの書き方として「Hello World!地獄」をやりました。 setup部は1度だけ実行、loop部は何度も実行でしたね。 hollywis.hatenablog.com 今回は、ちょっと進んだLチカ「ブレッドボードLチカ」をやってみたいと思います。 利用しているキットに近いやつは⇩ Arduinoをはじめよう 互換キット UNO R3対応互換ボード 初心者専用実験キット 基本部品セット20 in 1出版社/メーカー: vershipメディア: おもちゃ&ホビーこの商品を含むブログを見る まずはブレッドボードを知る ブレッドボードとは、半田付けしなくても簡易的に電子回路が作れちゃう代物です。 ブレッドボードの仕様 +の赤線一列は電子的に繋がっています -の青線一列は電子的に繋がっています 同じ数字のa,b,c,d,eは電子的に繋がっています 同じ数字のf,g,h,i,jは電子的に繋がっています 深く考えずに触ればすぐ慣れると思います Lチカ回路を作る こんな感じの回路を作ります。*出典:SainSmartチュートリアル ブレッドボード 抵抗 200Ω(赤黒茶金) LED (何色でも可) ジャンパーコード3本 チュートリアルには220Ω(赤赤茶金)の抵抗を使うとなっていますが、見つからなかったので200Ωでやっちゃいます。 抵抗については、こちらなど参照:カラー抵抗早見表! こんな感じですね。 プラス側(赤)はデジタルピンの9ピンに刺して、マイナス側(青)はGNDに刺します。 刺しました。微妙に位置が違いますが、回路的に一緒のはず。 だいたいでいいと思います。多分。 プログラム プログラムはこちらです。 int ledPin = [...]

中華で始める Arduino入門日記4「Hello World! 地獄」を作る

こんにちは、のすけです。 中華で始める Arduino入門日記の4回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回はハードウェア界の「Hello World!」である「Lチカ」をやりました。 hollywis.hatenablog.com 今回は、プログラミング界の「Hello World!」。つまり、「Hello World!」をやってみたいと思います。 しかもただの「Hello World!」ではつまらないので、「Hello World! 地獄」を作っちゃいます。(チュートリアル未記載) まずはHello World!を書く Arduino IDEを開いて、下記ようにプログラムを書きます。 setup関数の中のみ記述します。 Serialというのは、ArduinoとPCのシリアル通信に使う命令のようですね。 void setup() { // put your setup code here, to run once: Serial.begin(9600); Serial.println("Hello World!"); } void loop() { // put your main code here, to run [...]

中華で始める Arduino入門日記3 LEDをチカチカさせるぜ

こんにちは、のすけです。 中華で始める Arduino入門日記の3回目です。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 本題 前回は、ArduinoIDEとArduinoを接続するところまで行きました。 中華で始める Arduino入門日記2 PCと接続する - hollywis's diary (はりうすブログ) 今回は、マイコンボードの始めの一歩である「LEDをチカチカさせる」通称「Lチカ」をやります。 早速始めていきましょう。 マイコンボードを理解する まずはArduinoの端子などを確認していきます 左上から リセットボタン:赤い丸 GND:グランド Digital I/O ピン PowerLED ANALOG Input POWERエリア(3.3V, 5V, GND) があります。 主に、Digital I/O ピンに対して命令を実行することでLEDをチカチカさせたりできるようです。 それぞれのDigital I/O ピンには5vまたは3.3vの電圧が流すことができます。 (HIGH)の状態:3.3vまたは5v  (*設定によるらしい) (LOW)の状態:0v という訳です。つまり2進数で言うところの(HIGH)の状態を「1」と解釈し、(LOW)の状態を「0」と解釈することで プログラムの世界とハードウェアの世界をつなげている感じでしょうか。 LEDを刺す では、チュートリアル通りDigital I/O ピンの13番ピンにLEDを指します。 LEDは足の長い方がプラスで短い方がマイナスです。 足の長い方(+)をピン13に指して、短い方(-)をGNDピンに指しました。 こんな感じです。 [...]

さいぞうのArduino初心者日記3 MacにArduinoをつなぐ

そもそものことながら、Macでarduinoがつながらなくて困った。 というか、最初はosx上のvmware fusion上のwindows 7でarduinoを動かそうとしていた。 チュートリアルのHello worldはうごいたのだけど、それはマヤカシだったようで、 別件であるスケッチを動かそしシリアルモニタを開くと、でそのポートはbusyとかいわれて動かなかった。 こんなのがでる。 Arduino Uno and VMware Fusion 検索してみると、VMWareとarduinoは相性がわるいらしい。 諦めて、素直にosx本体でうごかそう。 OSXの問題 しかし、macにもすんなりとはつながらんかった。 正確に言うと、Macにつなげて、スケッチをマイコンボードに書き込みできるけど、シリアルモニタを開くとエラーがでてうまく動かない。 こちらのqiitaの方と同じ症状だ。 MacOSX - Yosemite(Mavericks)でFTDIが動かない件 - Qiita この状態だと、arduino IDE上でおかしいのが確認できる。 上のメニューのツール>シリアルポートを開いて、/dev/cu.usbmodemなんちゃらかんちゃらというのが出てくればちゃんと動いている。 /dev/cu.usbserialほげほげ というのが見えていれば、ちゃんと動いていないので、下の作業が必要である。 解決方法 下のリンク先を参考に「FTDIのドライバ」というものを入れると動くようになった。 上のqiita記事と違い、ドライバを入れるだけでOKだった。 How to Install FTDI Drivers - learn.sparkfun.com ブログを書いていて何かしっくりこないと思ったら、ですます調のせいだった。 はりうすブログは私の中ではオフィシャルな場所なのでそうしていたが、書きにくいので今回からやめることにする。 関係のない宣伝だけど、たくさんarduinoのスターターキットの中では安いこいつをおすすめしておきます。 本記事ではこれを買っていじっているので、記事の内容をなぞろうという人はこれを買うのが速道です。 今回の内容とは何も関係ないけど.... Amazon.co.jp ウィジェット 次回はこちら hollywis.hatenablog.com 前回はこちら hollywis.hatenablog.com 総合もくじ [...]

中華で始める Arduino入門日記2 PCと接続する

のすけです。 それでは、今回は実際にArduinoに触っていきたいと思います。 この連載は、爆安の中華製のArduino互換機を入手し、色々と苦しみながらも安い互換機でArduinoを学習してしまおうというものです。 入手の話はこちらから。 hollywis.hatenablog.com 今回使うArduino互換機 前回ご紹介した中華キットに入っていたやつです。「UNO」とデカデカと書いてあります。 ちょっとパーツが歪んでたり、部品点数が公式品より少ない感じですね。 型番:詳細不明 ArduinoUNO R3 互換製品 一番左に何やらスイッチがあり、その隣にUSBの端子、一番右に黒い丸い穴が付いていますね。 PCと接続するためのUSBの端子はこのようになっています。PC側とArduino側で形が違います。 プリンターとかと接続するUSBと同じやつっぽいです。 接続してみる 接続するPC:Macbook 2015 (OS X El Capitan: 10.11.1) Arduino:ArduinoUNO R3 互換製品 まずIDEのダウンロード 下記のページからArduino IDEをダウロードします Arduino - Software そしてインストールして起動。 Arduinoのロゴが表示されて起動しました。 起動したら、上部のメニューから「ツール」ー「マイコンボード」から 「Arduino/Genuino Uno」を選択します。 これで、PC側の準備はOKなはず。 ArduinoをUSBで接続します。 Macbookは通常のUSBではなくUSB type-cですので、白い変換端子を付けています。 普通のPCはそのまま接続できると思います。 接続すると何やら赤いランプがつきました。 そしてPCを確認してみます。 「ツール」ー「シリアルポート」にArduinoっぽいデバイスがあれば成功なのですが、、、ありません。 そうこの中華Arduinoは、USBのモジュールを安いものに差し替えているらしく 別途ドライバーをインストールしないと動かいないそうです。 USBドライバのインストール それでは、早速ドライバを入れていきます。 USBチップがCH340またはCH341になりますので [...]

babylon.js ステップ15 環境設定

ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう!! 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボックス用の画像を自分で生成する方法 Fog霧 まとめ 背景色の変更 シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます scene.clearColor - 背景を変更する関数 scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);Color3型をnewして色を設定できます アンビエントカラーの変更 次のプロパティを使うとアンビエントカラーを設定できます scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3); clearColorの設定方法と同じように見えますが、アンビエントカラーについては、ambientColorシーンアイテムの最終的な色を決定するためにかなりの数の計算で使用されています。主に、メッシュとの組み合わせて使用​​され、メッシュマテリアルのStandardMaterial.ambientColor によって最終的なアンビエントカラーが決まるようです。 スカイボックス 美しい完璧な空を作りたいと思いませんか?それを簡単に実現したのがスカイボックスです。このボックスの中にカメラを設置すれば、あたかも広大な空の中にいるような演出ができます。作り方は次の通りまずは箱を作ります。 var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.disableLighting = true; skybox.material [...]

babylon.js ステップ14 パーティクル表現

babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう! パーティクルの作り方 パーティクルシステム 解説 パーティクルのテクスチャマスク パーティクルエミッタ ローカル空間 場所と広がり ライフタイム サイズ 色 ブレンドモード rate 放出方向 重力 回転 速度 速度リミット 抗力係数 整列 ノイズテクスチャ まとめ パーティクルの作り方 パーティクルシステム パーティクルシステムを用いたパーティクル表現の例はこちらです。コード中に説明を追加していますので順番にみていきましょう コード例は以下です。 var createScene = function () { var scene = new BABYLON.Scene(engine); // ライトやカメラなど環境セッティング var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-10, 7, -10), [...]

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.