はてなブックマーク

Next.jsはversion 9.3からSSGモードが用意されました。 Next-gen Static Site Generation (SSG) Support: Built-in optimized static […] Next.jsはversion 9.3からSSGモードが用意されました。 Next-gen Static Site Generation (SSG) Support: Built-in optimized static generation through new data fetching methods. https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support ということで早速試します。 Setup create-next-appでアプリを作ります。 $ npx c

すぐにわからなくなるので覚書 前提 Messaging APIでチャンネル作成済み 作成したアカウントを友達追加済み チャンネルのAccess Tokenを取得している 一斉送信 broadcast APIを利用する c […] 前提 Messaging APIでチャンネル作成済み 作成したアカウントを友達追加済み チャンネルのAccess Tokenを取得している 一斉送信 broadcast APIを利用する curlの場合 curl -v -X POST https://api.line.me/v2/bot/message/broadcast \ -H 'Content-Type:application/json' \ -H 'Authorization: Bearer YOUR_CHANEL_ACCESS_TOKEN' \ -d '{ "messages":[ { "type":"

Next.jsのアプリケーションを簡単に作るcreate-next-appというものを知ったので、これで作ったものをTypeScriptで動くようにしてみました。 セットアップ create-next-appでさっと作っておきましょう。 $ npx create-next-app my-first-next-app $ cd my-first-next-app TypeScriptセットアップ tsconfig.jsonを配置します。 $ touch tsconfig.json 不足しているライブラリを指摘してくるので、コピペして追加しましょう。 $ yarn dev [ wait ] starting the development server ... [ info ] waiting on https://localhost:3000 ... It looks like you're

Serverless FrameworkだけでAlexaスキルが管理できるということを知っている人は意外と少ないのかなと思ってまとめました。照井さん遅くなってすみません。 セットアップ sls createコマンドから始めることができます。templateにaws-alexa-typescriptを指定しましょう。 $ sls create -t aws-alexa-typescript -p ask-serverless Serverless: Generating boilerplate... Serverless: Generating boilerplate in "/Users/develop/sandbox/ask-erverless" _______ __ | _ .-----.----.--.--.-----.----| .-----.-----.-----. | |___

LambdaでPHPが動くので、とりあえずWordPressをいれてみた Lambdaがカスタムランタイム対応しましたね。PHPのLayerが公開されていましたので、恒例のやつをやってみましょう。 セットアップ LambdaでPHPを使う方法は以下のGitHubが参考になります。 PHP La […] Lambdaがカスタムランタイム対応しましたね。PHPのLayerが公開されていましたので、恒例のやつをやってみましょう。 セットアップ LambdaでPHPを使う方法は以下のGitHubが参考になります。 PHP Layer For AWS Lambda プロジェクトの準備 SAMでデプロイできます。 $ mkdir my-php-app $ cd my-php-app $ touch template.yaml template.yamlは以下のように書きましょう。 AWSTemplat

AWS Lambda(Node.js)のローカルテストを書く（via 実践AWS Lambda） 実践AWS Lambdaで個人的に一番嬉しかった記述が、ローカルテストの節だったりします。 読みっぱなしだと身につかないので、サンプルコードを触ってみました。 Node.jsをローカルで動かす 書籍のサンプルコードをちょ […] 実践AWS Lambdaで個人的に一番嬉しかった記述が、ローカルテストの節だったりします。 読みっぱなしだと身につかないので、サンプルコードを触ってみました。 Node.jsをローカルで動かす 書籍のサンプルコードをちょっとアップデートさせてみたやつ。 index.js exports.handler = (event, context, callback) => { callback(null, 'hello from Lambda'); } index.test.

なんかいい感じのがあったので試してみた。 https://github.com/aws/aws-amplify Reactプロジェクトのセットアップ 何はともあれReactプロジェクトがなければ話になりません。 Crea […] Reactプロジェクトのセットアップ 何はともあれReactプロジェクトがなければ話になりません。 Create React Appでサクッと作っちゃいます。 $ mkdir amplify-react $ cd amplify-react $ create-react-app ./ ※ npm install -g create-react-appでCreate React Appは導入できます。 こんなメッセージが出れば準備OK Success! Created amplify-react at /Users/develop/node/react/amplif

ElasticsearchのmatchクエリでANDとOR検索を�実現する Elasticsearch�のmatchクエリを使うと、スペース�区切りでのAND / OR検索が実行できます。 この記事の前提 この記事はElasticsearch 2.x系を想定しています。 それ以前orそれ以降のバ […] Elasticsearch�のmatchクエリを使うと、スペース�区切りでのAND / OR検索が実行できます。 この記事の前提 この記事はElasticsearch 2.x系を想定しています。 それ以前orそれ以降のバージョンではクエリの仕様が異なる場合がありますのでご注意ください。 matchでのシンプルな�検索クエリ $ curl https://example.com/_search -d '{ "query": { "match": { "title": "WordCamp To

E2Eやらないとなぁと言いながら2年が経ちそうだったので、今年こそはちゃんとやろうと思います。 Puppeteer ? ChromeをHeadlessに動かすためのライブラリ（made by Google）です。Beha […] Puppeteer ? ChromeをHeadlessに動かすためのライブラリ（made by Google）です。 BehatとかCucumber系も好きなのですが、Node.jsで気軽にぶん回せそう＆メンテが継続的にされそうという条件だと今のところこいつが一番かなと思っています。 Jest Reactでなにかやるときに大体セットになってついてくるテストツールです。 公式のドキュメントにPuppeteerの使い方が書かれている＆仕事で使うので今回はこいつにします。 セットアップ Jestのドキュメントにあるサンプルをみながら準備していきます。 Node.jsのバ

「React v16が出たぞやったー」ってなって早速yarn upgradeとかすると、こういうエラーで死にます。 FAIL src/App.test.js ● renders without crashing Enzy […] 「React v16が出たぞやったー」ってなって早速yarn upgradeとかすると、こういうエラーで死にます。 FAIL src/App.test.js ● renders without crashing Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })` before u

Implicit grantでAWS Cognito User PoolとAlexa Skillをリンクする いつのまにかCognito User PoolでOAuth認証ができるようになっていましたので、さっそくAlexa Skillのアカウントリンクを試してみました。 Implicit grantとAuthorization […] いつのまにかCognito User PoolでOAuth認証ができるようになっていましたので、さっそくAlexa Skillのアカウントリンクを試してみました。 Implicit grantとAuthorization code grant Alexa Skillのアカウントリンク機能では、アクセストークンの取得にImplicit grantとAuthorization code grantの２つが選べます。 Cognito User Pool側はこのど

Serverless FrameworkでStep Functionsを扱ってみる この記事はServerless Advent Calendar 2017の24日目に遅刻した記事です。 AWS Step Functions AWS Lambda １つで完了できないようなタスク・ワークフローをいい感じに […] この記事はServerless Advent Calendar 2017の24日目に遅刻した記事です。 AWS Step Functions AWS Lambda １つで完了できないようなタスク・ワークフローをいい感じに処理できるようにするやつ（という適当な認識）なAWS Step Functions。 使ってみたいなと思いつつなかなか使う機会がなかったので、これを機に触ってみました。 GUIで設定はしたくない チュートリアルなどは基本的にGUIでポチポチやるスタイルですが、ter

WP REST APIでエンドポイントを追加した場合、受け付けるクエリに関する設定も行えます。 ドキュメントに乗っている例 �https://v2.wp-api.org/extending/adding/ <?ph […] ドキュメントに乗っている例 �https://v2.wp-api.org/extending/adding/ <?php add_action( 'rest_api_init', function () { register_rest_route( 'myplugin/v1', '/author/(?P\d+)', array( 'methods' => 'GET', 'callback' => 'my_awesome_func', 'args' => array( 'id' => array( 'validate_callback' => function($para

Stripe Checkoutで決済ボタンを作成してみた 寄付・・・は日本ではいろいろ制約ありますが、簡単な決済ボタンが欲しくなる時ってまれによくありますよね。 Stripeでいい方法ないかなーと調べてたところ「Stripe Checkout」がかなり手軽な感じだったので、ちょ […] 寄付・・・は日本ではいろいろ制約ありますが、簡単な決済ボタンが欲しくなる時ってまれによくありますよね。 Stripeでいい方法ないかなーと調べてたところ「Stripe Checkout」がかなり手軽な感じだったので、ちょっと触ってみました。 Stripe Checkoutのいいところ １行さわればテストと本番を切り替えできる 決済システムの悩みどころとして、本番とテスト環境の切り分けが挙がると思います。 本番で使用する環境ではテスト用のカードで決済させたくないですし、かといってテスト環境で実際にカード決済す

alexa-sdkとServerless FrameworkでAlexa Skillを作って公開してみた話 これからやること増えそうなので、振り返りも兼ねて。 作ったもの “Alexa, ask shifter man give me some shifter information.”などと話しかける […] これからやること増えそうなので、振り返りも兼ねて。 作ったもの “Alexa, ask shifter man give me some shifter information.”などと話しかけると、Shifterに関することを話してくれます。 簡単なAlexa Skillの作り方 たぶんこのやり方が一番簡単にAlexa Skillを作れます。たぶん、きっと、おそらく。 サンプルを探す まずhttps://github.com/alexa/にいきます。 するとskill-sampl

これめっちゃ便利なのに本当に記事少ないです。みんなもっと書こ？ Amazon EC2 Systems ManagerとAWS ConfigでAmazon Linuxの記録/追跡、自動チェックをしてみた ｜ Developers.IO EC2 Systems Manager のパラメータストアを利用したアプリケーション環境設定の管理 ｜ Developers.IO AMIMOTOのWordPressバージョンをEC2 SSMでインベントリするドキュメントをCloudFormationで作ってみた | WP-kyoto その他 KFUGやWordPress界隈でもLT芸やLT芸人とよばれる動きがいろいろありますが、自分の参加しているコミュニティではJAWS-UG系のLTがぶっちぎりで頭おかしいぶっ飛んでると思います。 https://twitter.com/jawsdays/status/84

WordPressの前にCloudFrontを置くためのプラグイン「C3 Cloudfront Clear Cache」を作った話 AMIMOTOアドベントカレンダー２５日目にアップされるはずだった記事です。 進捗ダメでした。 AMIMOTO使っているとやはりCloudFrontは使いたくなりますよね。安いし早くなるし。 設置方法はWordPress […] AMIMOTOアドベントカレンダー２５日目にアップされるはずだった記事です。 進捗ダメでした。 AMIMOTO使っているとやはりCloudFrontは使いたくなりますよね。安いし早くなるし。 設置方法はWordPress の前段に CloudFront を配置するという記事を見るのが一番だと思いますので割愛します。 AMIMOTOマネージドホスティングの方でお問い合わせしてくれてもええんやで((꜆꜄•௰•)꜆꜄꜆» WordPress

起きたこと react-native-vector-iconsを使おうとした。 [bash] $ npm install react-native-vector-icons –save $ rnpm link [/bash] コードを書いた [js] var Icon = require(‘react-native-vector-icons/FontAwesome’); //中略 <Icon name="rocket" size={30} color="#900" /> [/js] シュミレーターが赤く染まった。 やったこと XCodeプロジェクトの中にフォントが登録できていないことが原因らしいので、XCodeから手動で追加する。 React NativeのアプリをXCodeで開く時はこのファイルを選択する。 info.plistというファイルを開く 「Add Row」で項目を追加。 「F

postの一覧からアイキャッチ画像のデータを引っ張り出す時にいろいろやったので簡単なメモです。 完成イメージ こんな感じでアイキャッチ画像のある記事だけサムネイルを表示するようにします。 実はそのままでは取れないアイキャ […] こんな感じでアイキャッチ画像のある記事だけサムネイルを表示するようにします。 実はそのままでは取れないアイキャッチ画像URL WP REST APIで投稿一覧を取得されたことのある方はわかるかと思うのですが、デフォルトで戻って来るJSONの中にアイキャッチ画像のURLって入ってないんですね。 なのでアイキャッチ画像のデータを取ってくるには、Ajaxやwp_remote_getでリクエストを投げているAPIのURLに「_embed」というクエリを追加する必要があります。 参考：Linking | WP REST API v2 Documentation URLのサン

Just another web site

WP REST APIを使ってWordPressの記事をElasticSearchから検索してみる この記事はWordPress Advent Calendar 2015の１７日目に投稿すべきだった記事です。 遅くなってほんますみません。 ElasticSearchでWordPressの記事を検索する方法の１つとして、 […] この記事はWordPress Advent Calendar 2015の１７日目に投稿すべきだった記事です。 遅くなってほんますみません。 ElasticSearchでWordPressの記事を検索する方法の１つとして、WP REST APIを間に挟むパターンを試してみました。 ElasticSearchのセットアップなど https://wp-kyoto.cdn.rabify.me/try-to-use-elasticsearch/ （この記事の内容は実運用するも