超爆速でWYSIWYGエディターを組み込む - Qiita
こんなオーダーが。 「いい感じで記事をかける機能導入して！」 「ヘッドレスCMS使えばすぐできるから！」 ほほう。では軽く調査しよう。 〜数日後〜 いや、簡単にはできないですぜ。少なくとも使用するメリットないっすね。 そもそも、ランニングコストかかりますぜ。 「じゃあいい感じに導入して！」 「できるだけ早くね！」 そんなこんなで、超爆速でWYSIWYGエディターを組み込んだ話を。 初めに 既存システムは割とレガシー。 PHP 7.2 Laravel Framework 7.25.0 MySQL 5.7 jQuery 3.5.1 Bootstrap そもそもWYSIWYGエディターとは？ WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See
jqueryを使って `<input type="file">` に入れられた画像データをリアルタイムでサンプル表示する - Qiita
formの処理の課題はよくもらうんだけど、いつもどうだったか忘れてしまう。 担当しているサイトがjqueryを使っているので、画像をfileで取り込んでサンプル表示するメモしておく。 InternetExplorer 9 以前では、対応していません。 Safari 5 以前では、対応していません。 対応表はこちらMDN ウェブドキュメント //fileを変更したら $('#image').on('change', function() { //fileの値は空ではなくなるはず if ($('#image').val() !== '') { //propを使って、file[0]にアクセスする var image_ = $('#image').prop('files')[0]; //添付されたのが本当に画像かどうか、ファイル名と、ファイルタイプを正規表現で検証する if (!/\.(jpg|j
input[type=date]の挙動とDatepicker
input[type=date] を使った時の挙動、実はいまだにブラウザによってまちまち。 Chrome はチープなピッカーを申し訳程度に表示するんだけど、macOS 版の Safari に至ってはピッカーすら出してくれない。ただし iOS、iPad OS 版の Safari はちゃんとしたピッカーを表示してくれる。 なので iPhone、iPad の場合は OS デフォルトのピッカーを、それ以外のブラウザの場合は jQuery でもなんでもいいんだけど Datepicker 的なものを表示するようにしてみた。 まずは基本 まずは基本的によくやるようなパターン。以下のような HTML を用意する。 <input type="text" class="datepicker"> 次に以下のような JavaScript を用意する。 $( () => { $("input.datepicker"
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
masonry + ajaxでpinterest風タイルビューを実現する - Qiita
pinterestのような、 ・要素を隙間なく敷き詰める ・ブラウザのリサイズに応じて配置も変わる といった機能を持つタイルビューを実現するjsのライブラリはいくつかあります その中でも今回は定番のmasonryを使い、 ajaxでページングして下に下にコンテンツをページ遷移なしで追加してみます 基本的なmasonryの使い方は他に記事が大量にあるのでここでは解説しませんよ! 完成イメージは(手前味噌ですが)こんなかんじです↓ tokyotownname.com では始めます、 画像がいくつかトップにあり、 その下に「もっと読む」ボタンがあるとします。ありがちですね。 <!-- タイルビュー --> <div id="images"> <div id="image-unit">....</div> <div id="image-unit">....</div> ...... <div id
Ajax+pushStateでページ遷移したときにFacebookプラグインを更新する方法
jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法という記事を書きましたが、じつはAjaxでページを切り替えると、いろんな不都合が生じることが多いです。 とくに外部サービスのプラグインに多くて、ページを全部更新すれば正常なのに、Ajaxで更新したときだけエラーになることがよくあります。本当によくあります(^_^;) 原因としては、外部サービスのプラグインはだいたい、ページ読み込み後に独自のJavaScriptを実行するのですが、Ajaxでページの一部を変えてもプラグインが気づかないため、独自のJavaScriptが実行されずにエラーとなってしまいます。 ただ、気の利いたサービスならAjaxで読み込まれたときの対応方法が用意されています。例えば、Facebook。 ここSensebahnでも実装しているFacebookの「いいねボタン」をAjax対応にする方法をまと
フォームの内容を自動保存するjQueryプラグイン - [Mi]みたいなもの
ブラウザがクラッシュしたり、うっかりリロードしたり。 たくさんの時間をかけて入力したフォームの内容をあっという間に飛ばしてしまった経験は誰しもあると思います。 私はそういう事故が怖いので、長文の場合は自動保存機能のあるエディタやメーラー上で入力するようにしています。しかし、ユーザーの方にそれを望むのは無理というものですよね。 最近のCMSは大抵自動保存する仕組みがついています。そこまで本格的なものでなくてもいいから、簡単に導入できる、負荷の少ないフォームの自動保存機能、欲しくありませんか？ こんなご希望にぴったりのjQuery autosave plug-inをご紹介します。 機能の特徴 1.フォームに入力した内容をcookieに保存します（軽い） 2.formタグにあれこれ追記する必要はありません（簡単） 3.保存秒数等、細かい設定も可能です 4.さすがにリビジョンを指定して復元したりす
![フォームの内容を自動保存するjQueryプラグイン - [Mi]みたいなもの](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e250634c64eb4fb80539435b0bd5168f3972f80/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127156572702%2F17680117127156584381%2F1558483359)
【jQuery】autoResizeの使い方。テキストエリアのリサイズ
jQueryはJavascriptとHTMLを結びつけるJavascriptライブラリ。 autoResizeは、そのjQueryを使って、テキストエリアに入力したデータ量に合わせて、エリアをリサイズするスクリプト。 autoResizeの使い方は下記の通り。 --- 1. jQueryとautoResizeをここからダウンロード。 jQuery : jquery.min.js autoResize : autoresize.jquery.js or autoresize.jquery.min.js （僕は、autoresize.jqueryを使っている） 2. 自分の.htmlファイルのheadタグにダウンロードしたスクリプトのパスを入れる。 <head> <script src="js/jquery.min.js" type="text/javascript"></scri
1分でわかるjQueryのscrollTop() スクロール位置取得の使い方
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法
Sensebahnのサイト内では、ページを遷移するときにページ全体の更新ではなくページの一部を書き換える方法をとっています。（2013/1/31のデザイン変更で廃止しました。） そうすることで、ページ全体を読み込むよりも速く遷移でき、さらに、画面がブランクになる瞬間が発生しないので目のチラツキを抑えられます。 仕組みとしてはAjaxを使います。 AjaxはJavaScriptで簡単に使うことができます。 JavaScriptを使って、Ajaxによりページの一部を、他のページの内容に書き換えるのです。具体的には、次のコードでやります。 example.html <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <scri
クリエイターのためのWebテク講座 -無限スクロール
ツイッターやフェイスブックのタイムラインで、スクロールするごとに、過去の投稿が追加されます。そうすることで、最初の読み込みを少なくし、訪問時の待ち時間を軽減することが出来ます。今回は、そんな無限スクロールの仕組みを解説します。 サンプルを見る スクロールが一番下に行ったことを検知する。 サンプルでは、スクロールが下から100ピクセルの位置までスクロールすると、次の数字を加算して追加しています。まずは、このスクロールの下位置の検出をしましょう。 $(window).on("scroll" , function(e) { var bottomPos = 100; var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); //スクロールが下に行
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
IE8でjquery fileuploadでTypeError アクセス拒否な感じのアレやソレ - new takyam();
マジドハマりしましたよ・・・。 Ajaxでファイルをアップロードしようとする時に、IE9以下はXHR Lv2に対応してないので、IFRAMEの中にフォーム生成してうんたらかんたらする必要があります。 で、jQuery File Upload Pluginとか使うとその辺良いようにやってくれるんですが、やってくれるはずなんですが、何故か送信してくれない事案が発生。 ソース追ってくと、IFRAME内のform.submit()（formはjQueryオブジェクト）で止まってるっぽ。なんじゃこりゃ。 ソースはこちら 同じソースでChromeとかは問題なく動くんでIE8の何かにぶちあたったわけですが、結論から言いますと、<input type="file">がdisplay:none;だったのがダメっぽいです。 今回は、デザインされたボタンをクリックすると、display:none;な$file
jQueryプラグイン、jQuery.uploadを使って画像の非同期的にアップロードを行う - ToDoDoDo
ページ遷移を行わずにファイルタイプのアップロードを行うには、大体２つのパターンが考えられます。 一つは、ファイルデータをbase64形式にエンコードして、Ajax通信でサーバへ送る方法。 そして、もう一つは、ページ内にiframeを生成して、そこでformによる通信からサーバへ送る方法。 今回は後者の方法を行ってくれるライブラリ、jQuery.uploadを用いて使用者が特に意識することなく画像を非同期っぽくアップロードする方法の紹介です。 jQuery.upload サンプルコード // $(inputSelector).upload(url, callback, type) var url = '/action/to/upload'; var callback = function(res) { alert('File uploaded'); return this; }; var t
jQuery File Upload Demo - Basic version
Basic Basic Plus Basic Plus UI AngularJS jQuery UI File Upload widget with multiple file selection, drag&drop support and progress bar for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Select files... The maximum file size for uploads in this
jQuery – 目的の場所にさくっと要素を追加する | 1：n – DETELU Blog
「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsコンソールさんにAjaxのgetが非同期だよ(？)と指摘される | monologue
How to submit additional form data
jQuery File Uploadの使い方
