非エンジニアのための JavaScript 入門〜Twitterの検索結果をスプレッドシートに出力してみるの巻〜 | 株式会社ヌーラボ(Nulab inc.)
こんにちは。@agataです。突然ですが、 JavaScript を使ったことはありますか？「JavaScript？私には関係のないエンジニアの世界」だと思っていませんか？JavaScriptを少し知ると、業務の中の様々なルーティンワークをなくせます。特にマーケティング担当の方は「たくさんの情報を集めて、ひたすら整形する」ような作業を何度もやったことがあるのではないでしょうか。もし JavaScript が使えたら、その作業は限りなく０になるかもしれません。 本ブログでは、「非エンジニアの方もJavaScriptが使えると業務を効率化できるはず」という視点で、「JavaScriptの基本」と「コピペで使える具体的な活用例」をご紹介します。 今回使うのは、 Chrome ：無料ブラウザ Google Spread Sheet(Googleの無料サービス) または Excel：表計算ソフト の
「動き」はどの技術で実装すべきか？ Web Animations APIの登場で常識が変わる
CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。 従来のWebアニメーションの問題を解決するAPI Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。 CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある SMI
面倒な手続き不要！「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、面倒な登録手続きやトークンなどが一切不要で、今すぐ利用できる便利な「Web API」を厳選してご紹介しようと思います。 これらのAPIを使うことで、Web制作がちょっと便利になったり、独自性のあるユニークなサービスを構築できるようになるでしょう。 また、簡単に扱えることから、「Web APIを使って何か作ってみたい…」と思っている初心者の方にもオススメですよ！ ■「Web API」の使い方！ 今回ご紹介する「API」は、いずれも「JSONP」形式でデータが取得できるので、普通のJavaScriptだけで試すことが出来ます。 以下のコードを、HTMLファイルに記述するか、新規にJSファイルを作って読み込むようにしましょう。 var script = document.createElement('script'); script.src
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる ｜ Tips Note by TAM
Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。 今回使用するのは、以下のJavaScript API になります。 Google Maps JavaScript API | Google Developers ■目次 Google マップの表示 Google マップにマーカーを立てる マーカーに吹き出しを追加する 住所から緯度と経度を調べる Google マップに複数のマーカーを立てる 1. Google マップの表示 まずは地図を埋め込んでみます。 実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。 APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。 1-1. 地図を埋め込む場所を指定 ■HTML <div id="sample"></div> 1-2.
SPAで動画を使って大ヤケドした話 - Qiita
tl;dr 気軽に removeChild するもんじゃない。 フレームワーク（Riot.js）は悪くない 概要 動画メインの小規模サイト（厳密にはSPAと言わないかも） スペック 動画は YouTube IFrame API と一部に video要素 を使用 フロントのフレームワークは Riot.js URL制御はRiot.jsのルータを使う バックエンドはSinatra（この記事には関係ない） YouTube IFrame APIで起こった問題 iframeをDOMツリーから切り離すとYouTubeのエラー頻発 <youtube> <iframe if={ page == 'hoge' } id="player" src="~" /> <script> routing (path) { this.page = path } riot.route(this.routing) onRead
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
Googleスプレッドシートの内容をJavascriptで取得する方法を教えて下さい。…
Googleスプレッドシートの内容をJavascriptで取得する方法を教えて下さい。 APIを使用したいので、JSON形式で取得したいと思っています。その方法を色々と検索しましたが、データを取得することができるというだけで手を入れないとJSON形式にならなかったり、Javascript単体では扱うことができないような方法しか見つけることができませんでした。なお、Pebbleというスマートウォッチで使用することを考えているので、ライブラリを扱うことはできません。
Web Audioの新しいAPIについてざっくり解説 - Qiita
Web Audio API の仕様は日々 GitHub上で議論 されていて、ある程度同意が得られたものは ドラフトページ で公開されています。仕様のブラッシュアップのほかに追加される API や変更のある API があり、それらはちらほらとブラウザに実装もされてきているので、簡単な説明とサポート状況、ポリフィルについてまとめました。 この記事に書いてあるポリフィルは下記のリポジトリにまとめてあります。 また、各API対応状況は下記のページでも確認できます。 http://mohayonao.github.io/web-audio-api-shim/test/impl.html http://compatibility.shwups-cms.ch/en/home Microsoft Edge / Safari 9 の対応状況が調べられていないので、どなたか情報ください！！ 新しく追加されるA
実用的なJavaScriptフレームワーク比較用サンプルアプリ「TODO-Module」を作ってみた - フルスタックエンジニアに
リッチなWebアプリケーションを作る上でJavaScriptフレームワークは欠かせませんが、 次々と新しいものが出てきてどれを使えばいいかわからないという方も多いと思います。 様々なフレームワークでシンプルなToDoアプリケーションを公開している TodoMVCというサイトがありますが、 大規模なアプリケーションをつくろうとした時、これでは少しシンプル過ぎてイメージが湧きにくいのではないでしょうか。 なので、もう少し実用的なToDoアプリケーション TODO-Module (source) というのを作ってみたので公開します。 また、このAPIを使ったSPA（シングルページアプリケーション）のクライアントも作りました。 TODO-Module-AngularJS (source) TODO-Module-Backbone (source) TODO-Module-Marionette (s
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
Google Analytics API と JavaScript クライアントを使って人気記事ランキングを作る Web サービスを作ってみた - しばやん雑記
2014 年も終わりなので Google Analytics API を使ってアクセス数の多いページを取得してみた - しばやん雑記 を今年最後にしようと思ったんですが、アクセス数の多い記事の情報を JavaScript と OAuth 2 でも取れるのではないかと思ったので、実際にサービス化してみました。 2017 年の人気記事ランキング生成 使い方は単純で、OAuth 2 でログインしてドロップダウンから取得したい Web プロパティを選択し、生成ボタンをクリックするだけで終わりです。 数秒後には実行結果がはてな記法、HTML、Markdown で出力されるので、適当に再利用してください。 実装の話 Google API を JavaScript から使う場合にはライブラリを読み込みます。API キーにだけ注意。 <script> var apiKey = '公開 API へのアクセス
JavaScriptで位置情報を取得する方法(Geolocation API)
ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。 サンプルデモを見る 現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。 判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
YouTube動画コンテンツの埋め込みをしよう【実践編・YouTubeAPIを使ってプラグインを作ってみた】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 さて、前回「YouTube動画コンテンツの埋め込みをしよう【紹介編・オリジナルUIと導入サイトまとめ】」という記事を書き、末尾で「次回は実践です！」と予告してしまったので…勉強してきました！ 以前に「サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！」という記事を書いたのですが、基本的にはこれと同じことをYouTubeAPIでやってしまおう、というのが今回の趣旨になります。それでは早速いってみましょう。 DEMO 今回は、以下の項目にあてはまるような方にお使いいただけるサンプルを準備しました。サクッと実装しないといけないデザイナーさんに向けて作ったものです！ しかし、私も所詮しがないデザイナー…。JavaScriptに堪能な方は、多分自分で書いたほうがスマートだと思います…。すみません、すみません…。 こちらは以下のような人におすすめです。
ウェブの仕様は今どこにあるのか？
Webの仕様 ウェブの仕様といえば、W3CやWHATWG、IETFとかが思い浮かぶかもしれません。 これらの仕様が最近ではメーリングリストやIRCといった旧来のところだけではなく、GitHub上で議論されて策定が進められている事が増えています。(両方使ってるという話) この記事はそのような方法で進められてる仕様等についての紹介です。 ＊ 自分自身はそこまで仕様に対して強い興味があるわけではないので、もっと詳しい方が正しくまとめて頂きたいです。。 最初にMove The Web Forward | Guide to getting involved with standards and browser developmentを見ておくといいかもしれません。 JavaScriptの仕様 この動きが多く見られるのがJavaScript(ECMAScriptやDOM APIを含む)周りの仕様につい
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今更だけどPromise入門 - Qiita
NexusOsc.com is for sale | HugeDomains
GitHub - madbence/node-drawille-canvas
WebAPIのこれまでとこれから
