[JavaScript] dataスキームURI生成（画像データのBase64変換）
Greasemonkey のユーザスクリプトなどの JavaScript ソースコード内に画像データを埋め込める、 『data:image/gif;base64,～～～』形式のデータ（dataスキーム）を生成します。 画像ファイルなどのバイナリデータを Base64 エンコードに変換しています。 data スキーマでは、外部ファイルへのアクセスなしにスクリプト内で完結して画像を表示できるため、 小さなアイコンなどの表示には便利です。data スキームは Firefox・Opera では利用できます。 残念ながら Internet Explorer は data スキームに対応していないので利用できません。 やってみよう 画像URL: ▼ ▼ JavaScript ソースコード生成結果: ここにソースコード結果が表示されます。 ▼ data スキーム経由の画像表示: 生成したコードの使い方
blog-entry-2.html
HTMLファイル内のCSSは大きく分けると、HTMLタグのstyle属性に記述されているものと、ファイルやstyleタグに記述されているものの2種類あります。 このうち前者は、JavaScriptを用いて書き換えるのがそれほど難しくありません。タグの要素を取得して直接書き換えるだけですから。 それに比べて後者は、特殊な手順を踏んで書き換えなければいけないのでちょっと面倒です。 でもCSSのクラスの定義などはCSSファイルかstyleタグ内に書かなくてはいけませんから、動的にCSSの定義を変更しようと思ったら後者を書き換えるしかありません。 用語解説 この記事には5個のオブジェクトが登場するのですが、名前が似ているせいもあって非常にややこしいので、登場するオブジェクトの解説を少しだけ。以下に解説するのはOpera、FireFox、Chromeで動く事を前提にしており、これらのブラウザでは無事
YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。 本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。 参考：NEXT A-Class │ メルセデス・ベンツ日本公式サイト このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。2016/10） 今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。 サンプルページを作ってみました → YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル 過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で
Youtube API から動画のデータを受け取る方法とフィードの種類 | memocarilog
YouTube API を使って動画情報を取得したりすることをやってみたので、取得できるデータの種類や使い方についてまとめてみました。 sponsored link ログイン中のユーザーデータを受け取ったり何か登録したりする場合には認証が必要になってきます。この記事では認証が必要ない、動画再生に関するデータの受け取りについて書いています。 公式ドキュメント 日本語の公式ドキュメントもあります。 デベロッパー ガイド: Data API プロトコル – YouTube — Google Developers 参考サイト YouTube API を知るのに参考にさせて頂きました。 第3回 Youtube APIとjQueryを使いこなす：jQueryではじめるAjax｜gihyo.jp … 技術評論社 YouTube Data APIで取得可能なフィード｜YouTubeAPI｜音声・動画配信
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
別ドメインの外部URLからidやclassなど特定の箇所を抜き出しサイトに表示する方法
同じドメイン内であればjqueryのloadやajaxでいけますが、他サイト（別ドメイン）になるとできません。 そこでjqueryのjquery.xdomainajax.jsを使って外部URLのhtmlを取得する方法のTIPSです。 ファイル全部を読むこともできるし、idやclass名で一部分や特定の箇所だけ切り取って表示することも可能。 ※一部のhttpsサイトでは取得できませんでした。（原因不明） jquery.xdomainajax.jsをダウンロード 以下よりjquery.xdomainajax.jsをダウンロードします。 jquery.fn/cross-domain-ajax at master ? padolsey/jquery.fn ? GitHub ダウンロードするのはjquery.xdomainajax.jsだけでOKです。 このファイルがないと別ドメインでのファイルを取
正規表現 - JavaScript | MDN
前のページ 次のページ 正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。 JavaScript では、正規表現はオブジェクトでもあります。これらのパターンは RegExp の exec() および test() メソッドや、String の match()、matchAll()、replace()、replaceAll()、search()、split() メソッドで使用できます。 本章では、 JavaScript の正規表現について説明します。
GoogleスプレッドシートをJSONPで利用する（前編） - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 以前Yahoo! pipesで似たような事をやりましたが、 どうやらGoogleスプレッドシートそのものがJSON出力に対応していたので、 それをJSから利用してみようという試みです。 URLの取得 「リスト」と「セル」 JSONPしてみる どんな時に使えそうか デメリットなど 後半へ URLの取得 現在の「新しいスプレッドシート」では「公開データのリンクを取得」のUIがありませんが、APIは一応整備されていてJSONPでも利用できます。 URL: https://spreadsheets.google.com/feeds/list/[A]/[B]/public/basic?alt=json [A]にはスプレッドシートID、[B]にはワークシートIDが入ります。 まずは対象となるスプレッドシートをJSONで出力する事からスタート
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
フォームからPOSTし、googleスプレットシートを更新するサンプル
ここを参考した、ありがとう御座いました。 つまり、googleスプレットシートをデータベースのように利用する。 ① まず、googleドキュメントでスプレットシートを新規作成、シート名を"DATA"に変更する ② ツール → Script Editorを開け、このサイトからスクリプトをコピペする ③ スクリプトのfunction名「doGet」を「doPost」に変更して、保存、プロジェクト名は任意 ④ 関数選択で「setUp」を選択し、実行、ポップアップした「Authorization required」にAuthorizeし、完了メッセージのページが表示される ⑤ もう一回「setUp」を実行、今回は何も表示しない ⑥ 「公開」→「サービスとして公開」、ポップアップ窓で、「Allow anyone to invoke this service」、「Allow anonymous acc
[Web] JSONPを用いてクロスドメイン制約を超える - YoheiM .NET
先日Twitter ShootingというWebゲームを作成しました。 TwitterのIDを入力してもらい、その人の画像とフォロワーの画像を使って、 シューティングゲームを行うというしろものです。 Twitter Shooting このゲームは、HTML + JavaScript + CSSのみで作成されています。 Twitterから画像データを取得したいのですが、 私のブログのドメイン「www.yoheim.net」からTwitter APIのドメイン「dev.twitter.com」へAJAXで アクセスしようとしたら、クロスドメイン制約に引っかかってしまいました。。 なんとか出来ないものかと調べていたらJSONPというモノを用いたら、 クロスドメイン制約を超えてTwitter APIを使うことができたので、そのまとめを記載したいと思います。 JSONPとは wikipediaでは、
テキスト読込型のデータベース製作工程
JavaScriptでデータベースを作ってみるサンプルです。製作過程を段階的に紹介しています。 JavaScriptのデータベースの利点と弱点 ★データを読み込んでしまうので動作が機敏。（データが大きくなると読み込みに時間がかかる） ★１つのHTML内で検索処理が完結するので技術面の安全性が高い。（CSVファイルは公開されてしまうので、個人情報は扱えない） ★CGIを設置する必要がなく、データだけを更新することもできる。（ブラウザからデータを更新できない） 製作の目的 ★JavaScriptでファイルの読込を行い、CGIを使わずにデータベースを運用できることを実証する ★プログラムとデータを分轄し、データはテキストファイル単独でメンテナンスを可能にする ★複数の検索機能や並び替えの機能を持ったデータベースの基本構造を製作する ★製作の過程を表示することにより、シンプルなデータベースや他の目
オリジナル画像のツイートボタンを設置する方法 | design Edge
Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。 独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。 基本的な構造は以下ソースの通りです。 HTML <a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolb
はてなブックマークエントリー情報取得API | Hatena Developer Center
本ドキュメントに関する注意事項 本ドキュメントははてなブックマークにおけるエントリー情報を取得するAPI実装を解説するものです。 API使用の解説 https://b.hatena.ne.jp/entry/json/任意のURL (この任意のURL では # を %23 にエスケープする必要があります) を GET リクエストで送信することにより、JSON 形式でデータを取得することができます。 例:) https://b.hatena.ne.jp/entry/json/http://www.hatena.ne.jp/ 例:) https://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fwww.hatena.ne.jp%2F また https://b.hatena.ne.jp/entry/json/ に対し、以下のクエリーパラメータを GET
JSON | JavaScript プログラミング解説
JSON文字列とJavaScriptオブジェクトの相互変換 JSONオブジェクトがサポートされるならば、そのメソッドによりJSON文字列とJavaScriptオブジェクトを簡単に変換できます。それがサポートされるかどうかは、簡単にはWindowオブジェクトにJSONプロパティが存在するかどうかで判別できます。 if( window.JSON ) { // JSONがサポートされる } ちなみにPrototype.jsでは、 var NATIVE_JSON_PARSE_SUPPORT = window.JSON && typeof JSON.parse === 'function' && JSON.parse('{"test": true}').test; のように判別しています。 JSON文字列 → JavaScriptオブジェクト JSON.parseがサポートされるならば、それでJSO
JSONの読み込みと値の取得 (JavaScript プログラミング)
JavaScriptでJSONファイルを読み込み、値を取得するコードを紹介します。 概要 JavaScriptでJSONを扱う場合にはJSONオブジェクトを利用します。JSON形式のファイルを読み込んでオブジェクト形式でアクセスする場合は JSONオブジェクトのparse()メソッドを呼び出します。また、JavaScriptでJSONを取得するため、XMLHttpRequestを利用します。 JSONがオブジェクトの配列の場合の読み込み方法はこちらの記事を、JSONが1つのオブジェクトで値が配列オブジェクトになっている場合はこちらの記事も参照して下さい。 また、HTMLファイル中に記述した、JSONオブジェクトを読み込む方法についてはこちらの記事を参照してください。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <h
イヌでもわかるJavaScript講座
いままでのステップの知識でこのような月間カレンダー表も作れてしまいます。お部屋(ホームページ)のインテリアにどうぞ。(^^; 【リスト】 <script language="JavaScript"><!-- // **************** // ** 下準備 ** // **************** myDate = new Date(); // 今日の日付データ取得 myWeekTbl = new Array("日","月","火","水","木","金","土"); // 曜日テーブル定義 myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);// 月テーブル定義 myYear = myDate.getYear(); // 下２桁の西暦取得 myYear = (myYear<2000) ? (1900+myY
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YouTube Data API (JSONP) 1 - JSFiddle - Code Playground
超高速簡易データベース(Ver.1.15)
Twitter アカウント名を入れるだけでアイコン画像を表示してくれるURL