Help us understand the problem. What are the problem?
# require database cleaner at the top level require 'database_cleaner' # [...] # configure shoulda matchers to use rspec as the test framework and full matcher libraries for rails Shoulda::Matchers.configure do |config| config.integrate do |with| with.test_framework :rspec with.library :rails end end # [...] RSpec.configure do |config| # [...] # add `FactoryGirl` methods config.include FactoryGirl
Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 1. 前提条件 前回の実習を終わらせておくこと 2.axiosとmockeyをインストール VueでAjaxするには何を使えばいいの?っていう話が調べていくときな臭い感じ・・・・・ https://jp.vuejs.org/2016/11/03/retiring-vue-resource/ とりあえず、上記の公式コミュニティでおすすめされてる、axiosを使ってみたいと思います。 var mocky = require('mocky'); mocky.createServer([{ // simple GET route without request body to match
Vue.js で気象情報を表示させてみたいなとふと思い立ったので実際に作りながらVue.jsのAPI連携についてもまとめてみました。 今回実装するに当たってAPIからデータの取得が簡単に行えるaxiosを利用します。 基本的なVue.jsの使い方は公式ドキュメントがあります。 Vue.js - 基本的な使い方 axiosに関してより詳しく知りたいという方は以下のリンク先でご確認ください。 GitHub - axios/axios: Promise based HTTP client for the browser and node.js ■以下のように特定地域の気象情報をVue.jsで描画させることを目指します。 デモページ ■必要な準備 OpenWeatherMapでアカウント(無料)を作成し、APIキーを取得する OpenWeatherMapでは気象情報を取得できるAPIサービスが用意
このブログでもちょいちょい紹介している写真公開用ブログの方で掲載した写真の場所を示す地図を表示させる機能をGoogle Maps JavaScript API V3を使って実装しました。その辺の実装方法をまとめようと思ていますが、その前にその機能の基礎となるキーワードからの地図検索機能の実装方法をまとめておきます。Google Maps JavaScript APIを使うと凄く簡単に実装することができます。 サンプル以下サンプルになります。キーワード入力フォームに[住所]、[建物名]、[緯度経度(緯度と軽度の間はカンマ区切り)]などを入力して、「地図検索」ボタンを押すと、フォームの下のスペースに地図が表示されるようになっています。 地図検索機能サンプルGoogle Maps APIの概要そもそもGoogle Maps APIとは?まず最初にGoogle Maps APIについて簡単に説明し
ReactやAngularと並び、ここのところ人気が高まっているVue.js。Axiosを組み合わせれば外部APIを使った Webアプリも手軽に開発できます。 JavaScriptのアプリケーションを作っていると、よくリモートソースからデータを取得したり、APIを使いたくなったりすると思います。最近、公開されているAPIを見ていたら、ソースからデータを取得して処理するのに良いものがたくさんあることに気付きました。 Vue.jsを使えば提供される機能を使ってアプリを構築し、数分のうちにコンテンツの配信を始められます。 ニューヨークタイムズのAPIからデータを取得して、その日のトップニュース記事を表示し、ユーザーが興味があるカテゴリのニュースを選びだせる簡単なニュースアプリの作り方を説明します。この記事の全コードはここにあります。 アプリの出来上がりは下の図のようになります。 この記事では、V
コメント欄にも他の方のおすすめAPIを書いてくれているので是非見てください! Google Sheets API 公式:https://developers.google.com/sheets/api/reference/rest/ 数万行のGoogleスプレッドシートの読み取り・書き込み処理などができます 読み取りだけであればAPIkeyの発行だけでできますが、書き込みにはOAuth認証が必要です 参考:PythonとSheets API v4でGoogleスプレッドシートを読み書きする Google YouTube Data API 公式:https://developers.google.com/youtube/v3/docs/ YouTubeを検索して動画・再生リスト・チャンネルなどの一覧などを取得したり、更新したりすることができます 検索条件で地域(regionCode: JP)
vue.jsでvue-routerを使用する際にデフォルトではhash modeとなるためURLに#が付加されます。#を使用したURLが嫌な場合はmodeをhistoryに変更することでURLに#を付加しないようにすることができます。 modeを変更するにはVueRouterの指定で以下のようにモードを指定します。 const router = new VueRouter({ mode: 'history', routes: [...] }) historyモードではhistory.pushState APIを使用して hash modeと同様にページリロードなしにURLの書き換えを行うことができます。
created と mounted どちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスできる DOMにはアクセスできない mounted created + DOMにアクセスできる APIアクセスは created と mounted のどちらで行う? APIアクセスはほとんどのライブラリで非同期に行われる。そのため、 created と mounted のどちらでAPIアクセスを開始しようが、レスポンスが返ってきた時点でコールバックが実行される。 上記を踏まえて、レスポンス完了後のコールバックの中で、 propsにデータを設定するだけの場合は、 created を使う DOMを構築してる間
はじめに 「最近、curlが楽しい」 というわけで、最近、curlでPOSTしたりDELETEしたりcookieからSessionを読み込んだりと触れ合う機会が多かったので、その時知ったものを備忘録も兼ねてまとめました。 なるべく実行コマンドとその結果の出力をセットで書くようにしています。 curlコマンドは便利 curlは便利です。 APIと触れ合っていると、 手軽に HTTPリクエストしたくなる色んなシーンに出会います。 「あれ? サーバー死んでる?」 「思ってたレスポンスと違うな、何が返されているんだ?」 「認証必須にしたんだけど、うっかり抜け道ないよね?」 「さくっとPOSTしてテスト用にデータ準備したいんだけど...」 ...etc こういった、とりあえず生で、くらいのテンションでHTTPリクエストしたいなら、curlは有力な選択肢の一つと思います。 もちろん、本格的な確認やデー
はじめに curlコマンドを使ってapiを叩いたりするのですが、curlコマンドってただapiを叩くためのコマンドなの?みたいなレベル感でした。 業務で使ったコマンドを簡略化すると下記になるのですが、オプションの意味とかよくわからなかったので勉強がてらまとめてメモしました。 参考にしたサイトは下記のマニュアル https://curl.haxx.se/docs/manpage.html curlコマンドとは curlコマンドとはサーバから、もしくはサーバへデータ転送を行うコマンドです。 curlコマンド自体はapiを叩くためだけに存在しているわけではないです。 httpリクエストができるコマンドなのかなーって思ってたのですが、実際には HTTPやHTTPSといったプロトコルに対応しているため、GETでAPIを叩いたりすることができるというだけで、 curlコマンド自体はFTP,SFTP,L
仕事で Github を使っていたり、 OSS への contribute しようと思ったときに issue を作成することがあると思うが、最近の Github の機能追加もあって、ベストプラクティスが共有されてない感があるので、おれはこうしているということや、アドバイス募集の意味も含めて書こうと思う。 まずは issue を作成する際、頭にいれておいたほうがいいことについて。 ドキュメント Github の公式ドキュメントがあるのでまずざっと目を通しておくとよい。 https://guides.github.com/ https://guides.github.com/features/issues/ https://guides.github.com/features/mastering-markdown/ issue とは何か ? 読み方は「イシュー」。直訳すると「議論すべき重要な話
はじめに HerokuのSendGridアドオンを、Rails+Action Mailerで使ってみる。 環境 Ruby 2.4.3 Rails 5.1.4 メーラーを作成する Action Mailerを使ってみる。下記サイトを参考に進める。 railsguides.jp メーラーを生成 % bin/rails generate mailer UserMailer create app/mailers/user_mailer.rb invoke erb create app/views/user_mailer 中身を編集する app/mailers/user_mailer.rb class UserMailer < ApplicationMailer default from: 'notifications@example.com' def welcome_email(user) @us
手持ちの本を管理するプログラムが欲しくて、作ることにした。 以前ヤフオクで落としたバーコードリーダーOPI-2201をつかって、背表紙にあるISBNのバーコードを読み取って、あとはこれをAmazonのProductAdvertising API使って書籍情報を取得してくる…みたいなのを作っていたんだけど、PA-APIアクセスのキーとかをソースコードにベタ打ちしたcommitをgithubにpushしたら、GitGuardianとやらから警告メールが飛んできた。 メールの日付を見るに、pushから数十秒くらいで送信されているみたい。すごい早いじゃーんと思ってGitGuardianのページを眺めに行くと、どうやら人工知能に興味がある人が趣味的にやってるサイトらしくて、機械学習で自動判別しているらしい。 毎日200万くらいあるPublicなcommitをひたすらチェックしていってるみたいで、 平
こんにちは。FASTCODINGです。 Googleマップといえば、目的地までの道のりを調べたり ストリートビューで回りの様子を見てみたりと、近頃私たちにとってとても身近なサービス。 そんなGoogleマップの中でも、企業サイトやイベントサイトなどのウェブページへのマップ埋め込みに 多く利用されているGoogle MAP APIのサービスが2018年7月16日から大きく変わり、Google Maps Platformに移行します。 期限まで残すところあとわずか。 突然、管理サイトに埋め込んであるGoogleマップが 見えなくなってしまわないよう、きっちり確認しておきましょう。 今回の仕様変更で変わること Googleマップを埋め込む際、APIキー完全必須に APIキー必須のアナウンスは、2016年6月には行われていましたが 古いサイトではまだAPIキー無しでも表示が可能でした。 ですが、7
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く