React + Unsplash APIで画像検索アプリを作ろう
2023年2月7日 JavaScript, React Reactの勉強がてら、高画質な画像を配布しているUnsplashが提供しているUnsplash APIを使って画像検索アプリを作ってみました。その復習に作成手順をまとめてみたので、これからReactを勉強しよう！と思っている方の役に立てれば幸いです！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ 目次 Unsplashとは こんなアプリを作ってみよう 1. Unsplash APIの開発者登録 2. ViteでReactアプリのベースを作成 3. タイトル部分の作成（Title.jsx） 4. 検索フォームの作成（Form.jsx） 5. Unsplashのデータを取得 6. 検索結果の表示（Results.jsx） 7. 環境変数の作成（.env） 完成！ 白黒画像の検
YouTube Embedded Players and Player Parameters | YouTube IFrame Player API | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. Overview This document explains how to embed a YouTube player in your application and also defines the parameters that are available in the YouTube embedded player. By appending parameters to the IFrame URL, you can customize the playback experience in your application. For example, you can automatically play vi
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played. You can
ウェブサイトにFacebookメッセンジャーを埋め込むことが出来るって知ってた？ - カスタマーチャットプラグイン - Qiita
僕は知らなかったのでテンション上がってしまいました。 タイトル文言読んだだけだと「ん？」って感じだと思うのですが、こんな感じです。 分からなかった方のために無駄に集中線を追加。 https://protoout.studio プログラミング学習はもう古い。「令和」時代のイノベーションを担う日本初のプロトタイピング専門スクールを開校 最近スクールを作った(↑)のですが、そのWebサイトにチャットを組み込んで問い合わせなどを増やせないかなぁと調べていたところ見つけたのでつけてみました。↑のWebサイトでどんな感じか見てみて下さい。効果測定はこれからです。 というものらしいです。 Facebookを開かなくてもFacebookページアカウントに直接ユーザーが話しかけることが出来ます。 便利。 https://developers.facebook.com/docs/messenger-platf
まだXMLHttpRequestを使ってるの？ fetchのすすめ
JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな
日本一マクドナルドから遠い場所 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? きっかけ 日本マクドナルド様のサイトの店舗検索の地図をみてたら、やたらたくさんの店舗が一度に表示できる。 これって全店舗一度に読み込んでるのかな、とChromeのデベロッパーツールで覗いてみると、全店舗分のJSONが見えた。 全店舗2887件。 ちょっと拝借して長年の疑問を晴らしてみようと思った。『はたして、日本で一番マクドナルドから遠い場所はどこなのか？』 注) 離島は除きます。離島を含めると南鳥島がぶっちぎりです。 Fusion Tablesでプロットしてみる Fusion Tablesに緯度経度をインポートすることでマップに位置を
FRESH! における Web プッシュ通知機能 〜実装編〜 | CyberAgent Developers Blog
はじめまして。FRESH! でフロントエンドの開発をしている池田 (こりら) です。 この記事では、Web Push の実装概要や FRESH! における Web プッシュ通知機能 〜機能設計編〜 をもとに、実際に FRESH! でどのように Web Push 通知機能を実装したのかを紹介します。 アジェンダ Web Push の実装概要 Web Notifications API Web Push API Firebase Cloud Messaging (FCM) Service Worker push イベント notificationclick イベント FRESH! における Web プッシュ通知の実装 FCM に関連する処理をユーティリティ化 通知に関する実装 チュートリアルの実装 チャンネルページ・登録情報の管理ページの実装 各ブラウザの個別対応 Chrome (59) Fi
Bitcoin のリアルタイムチャートを Chart.js で表示する - nagix
(*English translation is here) Chart.js は動的で美しいチャートを手軽に作ることができるポピュラーな JavaScript ライブラリです。先日、リアルタイムストリーミングデータの表示に便利な自動スクロール機能を実装した chartjs-plugin-streaming プラグインを作りました。センサーデータのモニタリング等の IoT 関連の用途に最適ですが、何かリアルなストリーミングデータないかなー、と探していたところ、仮想通貨の取引所が配信している取引価格の表示にもぴったりな感じなので、早速試してみました。 最近は WebSocket を使って効率的にストリーミング配信を行う取引所も増えてきており、中には認証を必要とする場合もあるのですが、本記事では特に認証の不要なパブリック API を提供している取引所の取引チャートを作ってみましょう。 最初の例
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
mailit - メール送信をWeb APIで
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールをシステムに組み込むのは意外と面倒で、SMTP用のライブラリをついつい頼ってしまいます。さらに日本語問題やHTMLメール、添付ファイルなど様々な用途があります。 それをシンプルに解決してくれそうなのがmailitです。メール送信をシンプルなREST APIで提供してくれます。 mailitの使い方 mailitは設定ファイルを用意し、そこに本来のSMTPサーバの情報を記述します。そしてmailitを起動するとWeb APIが立ち上がります。 使い方としては以下のようにコマンドを打ちます。そうするとSMTPサーバのレスポンスをJSONで返してくれます。 $ curl --data "to=admin@moongift.jp&subject=hi&text=hey world"
Web Share APIでページをシェアする
現代において、SNSやアプリへのページシェアは必須とも言える機能です。例えばこのブログの記事も、記事の下部に多数のシェアボタンが設置されています。 Web Share APIはそういったページシェアをブラウザ上で実現するAPIです。今までは各サービス独自のシェアボタンを設置していましたが、Web Share APIを使うことで、統一的な手法でシェアができるようになります。 Web Share APIについて Web Share APIはページをシェアするためのAPIで、WICGが仕様を定めています。詳しい仕様は以下のURLになります： https://wicg.github.io/web-share/ 対応ブラウザは現在のところAndroid版Chrome61のみです。 簡単な使い方 Web Share APIは非常に単純なAPIです。以下に最も簡単な例を示します： // ボタンを作ってb
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... -
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲
ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
Google Maps JavaScript APIの使い方まとめ
公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用
次世代JavaScriptでデータバインディング： Object.observe() を試す - ぼちぼち日記
1. はじめに、 本記事は、HTML5 Advent Calendar 2012の参加（6日目）エントリーです。 当初は昨年のアドベントカレンダーでテーマにしたマイナーAPIをネタにして書こうかと考えていたのですが、探してもあまりピンとくるものがなく、いつものごとく新技術ネタに飛びついてしまう習性がでてしまったので今回次世代JavaScript(ES.harmony)ネタ(Object.observe)を書かせていただきます。 現時点では直接HTML5とは関係ありませんが、標準で利用できるようになったら皆さんがお世話になる機会が必ず増えると予感しています。今の時点で知っておいてもらっても絶対損はないと思いますのでどうかご了承ください。 （＿Ｏ＿） 2. Object.observe() とは何か？ 先日のHTML5勉強会でも取り上げられましたが、最近 JavaScript の MVC フレ
#9 nodeのコンソールは便利なjsonビューア - KAYAC Engineers' Blog
クリスマスシーズンということでAdvent Calenderのシーズンですね。 唐突ですが、この時期カップルよりも「リア充爆発しろ」ってネガティブワードの方が、たとえそれが記号的に使われてたとしても、嫌やなーって思ってしまう@9reです。 お前のリアルは彼女つくることしかないんか。つまらんなぁって思いますし、やっぱり、 俺こないだこんなパッチ送ってん！とか、この技術凄いやろ！みたいな充実もあると思うねん(｀･ω･´)！ さて、変な前置きになりましたが、このエントリは tech.kayac.com Advent Calendar 2012 9日目の記事です(12/9 35時公開)。 テーマは「私の中のマイイノベーション 2012」 nodeのコンソールは便利なjsonビューア nodejsも普及したし、元々軽量なフォーマットっていうことでJSONのAPI結構多いですよね。 自分は普段Andr
AngularJSまとめ - 人生dat落ち
$resource(angular-resource)長所 外部APIとの連携がしやすくなる。フロント側の処理をAngularJSのみに任せることができ、サーバ側にPHPやNode.jsのAPIのみを実装するという構成を作れる。WebとスマートフォンでAPIを共有できる。ngResourceはそのままでは使えないので、「angular-resource.js」を読み込む必要がある。 その上で、resourceを使用するmodulenに組み込む angular.module('app', ['ngResource']); function GalleryCtrl($scope,$resource) { var albums = $resource('https://graph.facebook.com/22092443056/albums'); $scope.albums = albums.
URL: createObjectURL() 静的メソッド - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback createObjectURL() は URL インターフェイスの静的メソッドで、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。 URL の寿命は、それを作成したウィンドウ内の document と結び付けられています。 新しいオブジェクト URL は、指定された File オブジェクトか Blob オブジェクトを表します。 オブジェクト URL を解放するには、 revokeObjectURL()
Slackでボットを5秒以内に作れるツールを作った - 波打際のブログさん
はじめに 最近エンジニア界隈で話題沸騰中のSlackですが、IRCに比べてBOTを作る際に手間がかかります。自称クソボットクリエイターの私にとってはこれは死活問題です。 そこでボットを超簡単に量産できるプロダクトを開発して公開したのでご紹介いたします。 BotHeaven (ぼっとてんごく) Slackボットを大量生産できるプロダクトです。いわばボットファームです。 SlackのOAuthでBotHeaven*1にログインし、Javascriptで数行のコードを書くだけでSlackボットを簡単に生成できます。 HTTP通信機能や、ボット毎のストレージなどを持てることが特徴です。 デモ このような感じでボットを実装します。 するとこのようなSlackボットが生まれます。 仕組み Rails + V8 + Slack インストール方法 VPS等はもちろん、Herokuにもデプロイして使えるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
