【簡単・オシャレ】PHPでstripeの決済を導入する手順【決済システム導入】 - Qiita
2015年から日本円での決済が可能になった「stripe」の決済代行システムをPHPで実装する手順を纏めてみました。 KICK STARTERやSlackなどのイケてる急成長サービスから、Facebookやtwitterなどの有名サービスにも使われています。 ■導入事例 そんな人気サービスのstripe、今回はCheckoutを使った１回限りの決済の実装を対象に解説していきます。 ドキュメントがまだ全部英語なんですが、 見た目の良さ抜群 初期費用・月額費などはかからず、料金は決済ごとにかかる3.6%のみ 決済時にスマホの番号を登録しておくとメアドと紐づけて次回からワンタップ支払いが可能 なのにやることはほぼないくらい手軽に実装できる という素晴らしさ！！ これから決済システムの導入を考えておられる方・実装に悩むエンジニアには超オススメです！！ 僕の語彙力では良さが伝えきれないので詳しくはこ
「Vue.js + Go言語 + PAY.JP 」でクレジットカード決済できるWEBアプリケーション実装ハンズオン - Qiita
そろそろカード決済の実装経験しとくかと思い、PAY.JPを眺めたらかなりドキュメントが充実してたので使いやすかった。今後、カード決済するサービスを作るのを見越して決済サービスをgRPCでマイクロサービス化してみた。そのまま Vue.js と Go言語を使い、カード決済できるWEBサービスのサンプルを試しに作ってみた。その実装を簡略化してハンズオン形式で紹介します。 全コードは GitHub にあげてます。 (こちらの画像は僕がVue.js+Goで作ったサービスで運用されています。https://ghlinkcard.com/) 得られるもの Vue.js + Go言語で簡易的なSPAをつくる経験 gRPC で簡単なマイクロサービスをつくる経験 PAY.JP を使ったカード決済の流れの理解 今回使う技術スタック フロントエンドは Vue.js。サーバーサイドは Go言語で実装します。それ以外
高機能ホスティングサービスNetlifyについて調べて使ってみた - Qiita
はじめに Netlify Netlifyは静的なサイトを超高速で提供できるWebサービスです。先日210万ドルの出資を受け話題になりました。わずか3ステップでおしゃれなサイトが作成できるとのことです。本記事の前半ではNetlifyの特徴を軽くまとめ、後半は実際にNetlifyを利用してサイトを作成してみます。 Netlifyの特徴 詳細は公式ドキュメントにあります。今回はその中から一部を抜粋して紹介します。 ビルド、デプロイ、ホスティングの全て Netlifyはフロントエンドのビルド、デプロイ、ホスティングの全てを行います。単純な静的サイトのデプロイであれば下記の3行をコマンドラインに打ち込むだけでできます。 また、NetlifyはGitHubリポジトリとリンクし、GitHubリポジトリにプッシュがある度にgruntやgulpを介したビルドをしたうえでサイトをデプロイしてくれます。 これら
webpack3でbabelとscssを別々のエントリーポイントからコンパイルする方法 - Qiita
こんにちは。初投稿です。 gulpを卒業し、webpackオンリーの開発環境を作りたいと思っている見習いフロントエンドエンジニアです。 本題 babelとscssは別エントリーポイントで、 babelはbabel、scssはscssのファイルのままコンパイルし、 それぞれをjs, cssファイルに書き出すような最低限の設定内容です。 色々調査しても、エントリーポイント1つで、jsオンリーでやっていたり、 webpack2以下の記事しか発見できなかったりだったので書いてみました。 エントリーポイントは1つの方がきれいなんだろうなと思いつつ・・・ 需要があれば、幸いですm(-ω-)m 入門的な内容だと思いますので、ツッコミどころあればバシバシお願いします。 パッケージインストール npm i -D webpack babel-core babel-loader babel-preset-env
Heroku で既存の本番環境をコピーしてステージング環境を作る - Qiita
すでに本番環境がHerokuにあって、ステージング環境もHerokuに作りたい場合 既にある Heroku の本番環境を fork してコピーする Forking Existing Apps | Heroku Dev Center これだけでいろんなアドオンや DB の中身もコピーされて、ステージング環境が出来上がる。アラ簡単。（http://APPNAME-stg.herokuapp.com でもう確認できる状態になってる） Collaborator 権限はコピーされないので、新たに追加し直す必要がある hook もコピーされないので、新たに追加する必要がある お手元のローカル環境に git remote add する ちょっと余談なのだが、このとき、herokuとかheroku-stgとかではなく、そのアプリケーションの名前でgit add しておくと、デプロイがプロジェクトによって違
Laravel Homestead 自己証明書でSSLを有効にする - Qiita
最近の Chrome は自己証明書では警告が出るようになっている。ローカルでの開発時には気にせずそのまま使ってもいいけど一部機能でちゃんと対応する必要があったので対応した。 環境 Laravel 5.5 Homestead 6.5.0。boxは4.0.0。 Mac。Windowsでも証明書の登録方法が違うくらいのはず。 サンプルに使うデモ Web Push がまさに警告が出てる状態では使えない機能 https://github.com/cretueusebiu/laravel-web-push-demo 準備 デモを clone。 README 通りに VAPID の設定まで進める。 途中で PHP に gmp が必要と出るかもしれないけどその辺りはなんとかする。 Homestead をプロジェクトにインストール
Recompose でいい感じに Higher-order Components(HoCs)を作る - Qiita
RecomposeはHigher-order Componentsをサポートするライブラリ。 Higher-order Componentsについては下記記事で軽くまとめた。 ReactのHigher-order Component(HoCs)に関するメモ どんなライブラリ？ HoCsを作成・提供するための便利関数ライブラリ 「lodash的なノリで、関数群をまとめている」とのこと 作者はflummoxやreact-actionなど、reactやredux関連を多く作っているライブラリの作者。 まだ 0.20で微妙にAPIは安定してない部分もアリ まずはサンプル 例： 未サポートブラウザの時にメッセージ出す 説明だけだとわかりづらいので、個人的に一番とっつきやすかったbranchを使って、特定のブラウザの場合に「お使いのブラウザはサポートされてません」と出すサンプルを書いてみる。 普通のR
Reactのコンポーネントをステートレスに！！！recomposeとは？ ~0からreact習得記 day 09~ - Qiita
Reactのコンポーネントをステートレスに！！！recomposeとは？ ~0からreact習得記 day 09~ これまでのreact習得記は、こちらから閲覧できます。 はじめに 株式会社VRizeでインターンとして勤務しているryo_tです。 短期目標に「１ヶ月でReactのUIを開発できるように」と伝えられたので、Reactはほとんど未経験ですが一歩一歩頑張って行きます。 目的 Higher-order Componentsとrecomposeを理解してコンポーネントに状態を持たせない設計を 行える様にする。 Qiitaで検索してもrecomposeの記事は13件しか（2017年10月12日現在）なかったので、使い方を簡単にまとめてみようと思います。 用語整理 recomposeはHigher-order Componentsを作成・提供するための便利関数ライブラリです。 React
ES6のconstを使い倒すレシピ3 - immutable.js編 〜 JSおくのほそ道 #036 - Qiita
こんにちは、ほそ道です。 Object.freeze編でやったようにオブジェクトの状態を完全に凍結させたい場合はfreezeしてしまえばよいのですが、アプリケーションを作っていると当然、拡張/変更が必要になるシチュエーションは出てくると思います。 今回はライブラリを使って不意なデータ変更によって生まれる複雑性に対抗する方法を紹介していきます。 1.前提共有編 2.Object.freeze編 4.コレクション一発代入/一発返却編 5.条件分岐一発代入/一発返却編 目次はこちら const宣言したオブジェクトの不変性を保ちながら変更に対応する 前回、deepFreezeという関数を作るときに、freezeされた新しいオブジェクトを生成して返すようにしましたが、そのようにして破壊的メソッドを使用せずに、変更を加えた新しいオブジェクトを返す、というようにするのが拡張/変更による想定外を生まないた
ブランチの切り替えをしなくてよくなるコマンド git worktree がすごい！ - Qiita
masterブランチでちょっとした変更をしたいんだけど、devブランチで作業しているから切り替えるのはめんどくさい。 そんな時はgit worktreeを使ってみてください。複数のブランチを切り替えずに操作できます。 ※git worktreeを使うにはGit 2.7.0以降が必要です。それ以前のバージョンだとgit worktree listがありません。 ブランチの追加 操作したいブランチはこんな風に持ってくることができます。 すると、作業ディレクトリ以下に指定したブランチの中身がリンクされます。 たとえば、git worktree add ./worktree-dev devとコマンドを打つと、./worktree-devディレクトリが作成され、その下にdevブランチの内容ができるわけです。 git worktreeは今いるブランチに影響を与えません。 つまり、作業中であっても操作し
javascriptを使ったSEO対策まとめ - Qiita
一昔前まではjavascriptを使ったSEOに弱いというのがあったりしましたが、今ではGooglebotが大分賢くなりjavascriptを実行できるようになってきてます。 とはいえ何も考えなくてもいいかというとそうでもないので、javascriptを使った場合にSEO対策として意識しないといけないことをまとめてみました。 いろいろ書きましたが、 Hisory APIを使ってURLをきちんと書き換えよう っていうのが主です。(pjaxと呼ばれている手法です） クリックやスクロールでDOMを生成するコンテンツはインデックスされない ページロード時点ではhtml内に生成されていないが、あるイベントが起きた時にDOM要素を生成するパターン。 Qiitaで言うとTOPページ下部にある「もっと見る」とかがそうですね。 Googlebotはjavascriptを実行することはできるのですが、clic
laravelでgeometry型から緯度経度を取ってくる時に使うスコープ - Qiita
例えばshopsテーブルにあるlatlongというカラムがgeometry型だったとして、ここから緯度経度を引っ張り出したい時がある。 特にgooglemapを埋め込む時にやれ中央にマーカーを置きたいとなると緯度経度が必要になる。 せっかくlaravelを使っているのであれば、スコープを使って一工夫 そもそもスコープって何って人はこちらを参照 http://laravel.com/docs/5.0/eloquent#query-scopes shopsテーブルのmodelに以下を記述 public function scopeLatlong($q) { return $q->select(array('*', DB::raw('X(latlong) as `lat`'), DB::raw('Y(latlong) as `long`'))); } このスコープを使うことで緯度の入ったlatカ
LaravelのMigrationについて調べた結果 - Qiita
公式ドキュメント https://readouble.com/laravel/5.1/ja/migrations.html 公式ドキュメント引用 マイグレーションとはデータベースのバージョンコントロールのようなもので、 チームでアプリケーションデータベースのスキーマを簡単に更新し共有できるようにしてくれます。 通常、マイグレーションはアプリケーションのデータベーススキーマを簡単に構築できるようにする、 Laravelのスキーマビルダーと一緒に使用します。 コマンド一覧 migrate Run the database migrations migrate:install Create the migration repository migrate:refresh Reset and re-run all migrations migrate:reset Rollback all data
GitHub APIから学ぶ次世代のAPI実装方式GraphQL - Qiita
最近公開されたGitHubのAPIは、GraphQLという形式に対応しました。今後はこちらが主流になっていくようで、既存のREST APIからGraphQLへのマイグレーションガイドも提供されています。 今回は、このGraphQLについて、実際にGitHubのAPIを叩きながらその仕組みを解説していきたいと思います。 GraphQLとは 歴史 GraphQLは、Facebookの中で2012年ごろから使われ始めたそうです。その後2015年のReact.js Confで紹介されたところ話題となり、同年"technical preview"のステータスでオープンソースとして公開されました。その後仕様が詰められ、2016年9月に晴れて"preview"を脱し公式実装として公開されました。これと同じタイミングで、GitHubからGraphQLバージョンのAPIが公開されています。 このあたりの経緯
CSS3のanimation-timing-function: steps(n) が便利 - Qiita
DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%
Herokuに独自ドメインのSSL接続を無料で導入できるようになった話（有料Dynoのみ） - Qiita
2017年3月下旬から、自前で証明書を準備せずに独自ドメインのSSLを導入できるようになりました。 https://devcenter.heroku.com/articles/automated-certificate-management これまでもLet's Encryptを使えば無料で導入できましたが、証明書の取得や更新は自分で行わなくてはならず、ただアプリを開発して公開したいだけの僕みたいな人（インフラ周りが苦手）にとっては朗報です！！ 対象は有料Dynoのみなのでそこだけはお金かかりますが、証明書代とか更新の手間とかがかからないことを考えれば安いので（Hobbyなら月額7ドル）さっさと払いましょう。 以下にその簡単な手順を書きます。 前提 有料Dynoが立ててある 独自ドメインを「abc.com」とする ACMの有効化 Heroku dashboardの対象AppのSetting
GitHub と連携して Confluence でプルリクを一覧する - Qiita
Atlassian Confluence は、とても優れた UI により、 非常にドキュメント作成の捗る Wiki ツールなわけですが、 これにいろいろなものをインテグレートすると、さらに捗るので、 今回は Github を連携してみようと思います。 やりたいことは以下。 Confluence 上で、対象プロジェクトの Open な PullRequest を一覧したい。 環境 Atlassian Confluence 5.8.10 Github API v3 準備 今回の目的を果たすために必要な物がいくらかあるため、これを入手します。 以下を集めます。 Github Personal access tokens 対象リポジトリの属している、ユーザー名、または Organization 名 対象リポジトリの名前 Github Personal access tokens アクセストークンは
RailsでReactをサーバサイドレンダリング（use Hypernova by airbnb） - Qiita
はじめに Railsにも対応しているJavaScriptのサーバサイドレンダリング用ライブラリairbnb/hypernovaが、airbnbからリリースされました。 この記事では、シンプルなRailsアプリを構築し、これまたシンプルなReactコンポーネントをサーバサイドレンダリングで表示するまでのチュートリアルを解説します。 ReactによるSPA（シングルページアプリケーション）も増え、Google等の検索エンジンでもある程度はページ内容を解釈してくれるらしいですが、サーバ側でHTMLをレンダリングして出力するサーバサイドレンダリングを利用すると、より正しくページ内容を解釈してもらえます。 Hypernovaとは A service for server-side rendering your JavaScript views Hypernovaは、JavaScriptコンポーネント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Git でマージ済みのブランチを一括削除する - Qiita
React Redux テスト考察 - Qiita
