【超便利】YubinBango.jsを使った住所自動入力フォームの作り方解説 - 株式会社PENGIN
粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 こんな悩みがある方に、便利なJavaScriptライブラリを紹介します！ 当記事ではJavaScriptのライブラリYubinBango.jsを利用して郵便番号を入力したら自動で住所を表示するフォームの作り方を解説します。 基本的な使い方からカスタマイズ方法を画像やコードを用いて詳しく解説するので、JavaScriptが苦手な方もこの記事を読めば郵便番号を入力したら自動で住所を表示するフォームを作れるようになります！
【簡単】jquery.autokana.jsの使い方【ふりがなを自動入力】
お問い合わせフォームには、レイアウトによって「名前」と「ふりがな」の２つ入力する場合がありますよね。 この場合、漢字を入力したさいに、ふりがなを自動入力したほうがユーザー的に手間がかかりません。 下記みたいに↓ 実はこれ簡単に実装できちゃいます。 それは「jquery.autokana.js」というJavaScriptライブラリを使うこと。 「jquery.autokana.js」とは、ふりがなを自動入力してくれるプラグインです。
モーダルを閉じたら動画も再生停止にする方法（videoタグ編）｜ゆーた 台湾移住🇯🇵🇹🇼
こんにちは！ 大阪でコーダーをしているゆーたです。 今回はモーダルを使用して、中に動画が埋め込まれている場合に、 モーダルを閉じると、再生されている動画も自動的に再生停止にする方法について書いてみたいと思います。 実際に実案件で少し悩んだので、記事にしようかなと思いました！ クリックするとモーダル内の動画が開き、モーダルを閉じると動画も再生停止します。 demoはこんな感じです↓ 基本的なモーダルの記述 基本的なモーダルとしては以下のような感じかと思います。 jQuery(function () { jQuery('.js-modal-open.js-play01').each(function () { jQuery(this).on('click', function () { let target = jQuery(this).data('target'); let modal =
WordPressのREST APIでアイキャッチ画像を取得する2つの方法 | オレDEV.com
今回はWordPressのREST APIでアイキャッチ画像の情報を取得します。 やり方は大きく2つ。 画像情報取得にもREST APIを使うか、前回の記事同様に記事のAPIにアイキャッチの情報を追加してしまうか、です。 両方紹介します。 APIを利用してアイキャッチを取得 実は投稿(post)のREST APIには最初からアイキャッチのデータが含まれています。 「投稿」のスキーマにある「featured_media」という項目です。 ここにはアイキャッチに設定されたメディアのIDが入っています。 REST APIを利用するフレームワーク(WordPressでないもの)側からはWordPressでのIDなんか渡されてもどうしようもないんですが、これを利用して今度は「メディア」のAPIを叩くとアイキャッチ画像の情報が取得できます。 「メディア」のAPIへアクセス REST APIのドキュメン
jquery.instagramFeed.jsが使えなくなった話【アクセストークン不要】
2021年の5月頃だったと思います。jquery.instagramFeed.jsを導入してInstagramのフィードを表示しているサイトで、急に画像が表示されなくなりました。jquery.instagramFeed.jsはアクセストークン不要で、Instagramのフィードをウェブサイトに表示できる便利なプラグインでした。 色々調べてみたのですが、InstagramのAPIに仕様変更があり、アクセストークン不要でのフィード取得はもうできないみたいです。というわけで、Instagramのフィードを表示したければ頑張ってアクセストークンを取得するしかないです。 jquery.instagramFeed.js の公式サイトは以下ですが、公式のデモ画像もすべて読み込めていないことがわかります。 【公式サイト】jquery.instagramFeed.jsのダウンロードはこちら 導入サイトでクロ
jquery.instagramFeedというjQueryライブラリを使ってインスタグラムの一覧を表示させたい
前提・実現したいこと jquery.instagramFeedというjQueryライブラリを使ってインスタグラムの一覧を表示させたい 発生している問題・エラーメッセージ LocalbyFlywheelを使ったローカル環境では、うまく動作するのですが、本番環境にアップすると下記のエラーメッセージが表示されて動作しなくなってしまう エラーメッセージ Uncaught SyntaxError: Unexpected token '<' 該当のソースコード jQuery(function ($) { $(window).on('load', function(){ $.instagramFeed({ 'username': 'インスタグラムの', 'container': "#instagram-feed1", 'display_profile': true, 'display_biography
jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
<div> タグの内容を編集したい！ <span> タグの内容を編集したい！ そんな時 JavaScript では innerHTML のプロパティを利用します。指定した要素の中身を取得、書き換え、そして削除が行えます。これを jQuery で実装する場合 .html() を利用します。しかし innerHTML の処理を全て .html() に置き換えるのはおすすめできません。 用途に応じていくつかの関数を使い分けることで、処理内容が分かりやすいプログラムになります。では具体的な処理パターンを例に挙げて、innerHTML を jQuery で実装するサンプルを紹介しましょう。 サンプルプログラムでは、id:hogehoge を持つ div 要素に対して処理する例で説明していきます。それぞれ処理用ボタンのクリックイベントを起点に、プログラムが走るようにコーディングします。 <div id
トップページスライド（slick.js）のカスタマイズ | WEB制作の備忘録めも ミフネWEB
slick.jsのオプション もっと細かく指定したい場合は、slick.jsのgithubをご覧ください。 サンプルスライドにこれらオプションをいくつか設定すると下のようになります。 $(document).ready(function(){ $('.sample').slick({ autoplay:true, autoplaySpeed:3000, fade:true, dots:true, pauseOnHover:false, swipeToSlide:true, }); }); 矢印やドット、余白のカスタマイズ(css) 下記を参考にcss編集してください。 ドット部分のカスタマイズ スライドの下に表示されるナビゲーションドットのカスタマイズです。（SEO Plusではサムネイル画像をナビゲーションに使用しているので、ドットは表示されません） /*位置を変える*/ .slick-
【jQuery入門】select要素の選択・取得・追加まとめ！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、jQueryから「select要素」を選択したり取得・追加するためのプログラミング手法について学習をしてきいましょう！ この記事では、 「select要素」とは？ それでは、まず最初に「select要素」についての基本的な知識から学習を進めていきましょう！ 「select要素」は、一般的にフォーム要素内でユーザーに選択肢を提供する際に使われるHTML要素になります。例えば、以下のような選択フォームを見たことがある人も多いのではないでしょうか。 上記のようなリストから1つだけ選択肢を選んだり、複数の選択肢を選ぶこともできます。そして、ユーザーが選んだ項目はjQueryから取得してプログラミングに組み込むことができるのです。 本記事では、この「select要素」をjQueryから操作するための基本から応用技まで詳しく解説していきますのでぜひ参考にして
ドラッグ＆ドロップでファイルのUploadを実現する「dropzone.js」 - Tecuration .com
「dropzone.js」はドラッグ＆ドロップでファイルをUploadするUIを提供するjQueryプラグインです。 dropzone.js ファイルアップローダーを実装するプラグインはたくさんありますが、「dropzone.js」の特筆すべき点はデザイン性の高さと、実装の簡単さにあります。まずそのデザインをデモ画像を通じてご紹介します。 Uploadする前はこのような状態です。 画像をドラッグ＆ドロップします。するとUploadが始まります。プログレスバーが表示され、どれくらいで処理が完了するかが分かります。 画像のUploadが完了しました。このようにミニサイズの画像が表示されます。 では、「dropzone.js」の最も基本的な実装方法についてご紹介します。まずは外部ファイルを読み込みます。 <script src="dropzone.min.js"></script> HTMLはこ
Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル:phpspot開発日誌
jQuery HTML5 Drag-and-Drop File Upload | LearnComputer jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル。 jQueryのfiledropプラグインを使いつつサーバにファイルをアップロードするためのJavaScriptとPHPコードの例が掲載されています。 JS部分のコード例。アップ先のPHPエントリポイント、アップ開始、終了時のイベントハンドラが指定できます。 PHP側では $_FILES を使ってファイルを受け取るという簡単な物になっています。 関連エントリ ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」 ファイルアップロード関連のjQueryプラグイン１０ PHPを使ったAjaxファイルアップロードサンプル１０
JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法
まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。（変更）「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。（追加）追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。（移動）移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。（移動）最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。（削除） いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします（これが後々大事になります）。JavaScrip
jQueryで「ページ遷移時に指定要素をフェードイン・フェードアウトさせる機能」を実装
海外のサイトを見るとリッチなユーザーインターフェースが実装されたものが増えてきているのに気付きます。私もその波に乗っていきたいので、今年は、このブログに対して「UIの強化」を目標にいろいろやっていこうと考えています。 その第一弾として、タイトルの通り「ページ遷移時に指定要素をフェードイン・フェードアウトさせる機能」を実装してみました。詳しく言うとサイト内のページ間を移動する際に、テンプレート部分の表示は残したまま、コンテンツ部分（ブログの記事）のみをフェードアウトさせ、ページ遷移後も同様にコンテンツ部分（ブログの記事）のみをフェードインさせるといった機能です。機能の実装は意外と簡単でjQueryとそのプラグインで実現可能でした。 ページ遷移時に#contentの部分をフェードイン・フェードアウトさせる実装方法について以下にまとめてみました。 リンクのクリック時に指定個所をフェイドアウトさせ
$(document).ready();について - monjudoh’s diary
jQuery使用時に以下の書き方をすると、どれを使ってもDOM構築後のタイミングで実行したい処理を実行できる。 $(document).ready(function(){ /*実行したい処理*/ }); $().ready(function(){ /*実行したい処理*/ }); $(function(){ /*実行したい処理*/ }); 以下のように複数回実行した場合は$(function(){/**/});を実行した順に、 中の関数が実行されるので以下の場合は、DOM構築後にconsoleに改行を挟んで1,2,3と順番に出る。 $(function(){ console.info(1); }); $(function(){ console.info(2); }); $(function(){ console.info(3); }); 自信がないので、一応、コードの該当箇所を確認 jQue
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
エフェクト操作：基本｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
マッチした要素をアニメーションしながら表示します。 オプションの第2引数callbackを指定した場合は、要素のアニメーション完了時に指定したコールバック関数を実行します。 マッチした各要素の高さ・幅・透明度は、指定した速度にしたがって動的に変更されます。 jQuery v1.3からは、paddingとmarginがより滑らかにアニメーションされるようになりました。 第1引数speedには、要素を表示時のアニメーション速度を指定します。 数値（ミリ秒）あるいは文字列を指定可能です。 数値の場合、例えば3秒なら「3000」を指定します。 文字列の場合、あらかじめ定義されている速度（「slow」（ゆっくり）、「normal」(通常）、「fast」（速く））のいずれかを指定します。 オプションの第2引数callbackには、アニメーションが完了した時に実行する関数を指定します。 関数が実行される
File APIその後使ってみて - それマグで！
ファイルAPIをその後ちょっと使う機会があった。いくつか気づいたことがあったのでメモ The File object provides information about -- and access to the contents of -- files. These are generally retrieved from a FileList object returned as a result of a user selecting files using the input element, or from a drag and drop operation's DataTransfer object. input type file以外でもファイルは取れるが ドラッグ＆ドロップは DataTransfer オブジェクト経由 XmlHttp は BlobBuilder 経由 da
jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み) | ゆるぶ | ページ 513
画面下までスクロールすると次のページを読み込んでくれるヤツですね。 イロイロ見てると次のような考え方みたいす。 対象コンテンツの下端の位置座標が表示エリア(ウィンドウ下端)に近づいたら、続きを読み込みます。これを、ウィンドウをスクロールした時にチェック。 まず、コンテンツの下端の位置座標を求める。対象エリアの id 属性が target なら、以下。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CMLog :: jQueryで子ノードの全削除