javascript と JS API

js HTML内の全要素を取得する方法

HTML文からjsでIDやClass名を使って要素の内容を取得する。 // 全要素中の要素（セレクタ指定） var elements = document.querySelectorAll('.sample-selector'); // 特...

WordPressプラグインを使わない「シンタックスハイライト」方法

ワードプレスのプラグインを使わない利点コードのハイライトが出来る「シンタックスハイライト」はWordPressのプラグインを使わないほうが軽量でコードがキレイになります。プラグインを使うと、バージョン変更の際に表示がかわってしまいます。...

js / APIWordPress

reCAPTCHA V3設置（HTMLとPHP,jsで設置）

reCAPTCHA V3の設置と使い方 reCAPTCHA V3からは画像の認識は無くチェックできるようになった。セキュリティレベルが低い場合は、再度Submitする際に画像などの認証が必要になる。 reCAPTCHA V3をjsでHTML...

WEBサイトやアプリにPDF化を実装するソフトやPDFアプリAPI

Illstllerで作成したファイルをPDFと連携させる紹介参考サイト mPDF mPDF Web2PDF、PDFmyURL オンライン上 Web2PDF、PDFmyURL 開封認証つきPDF、書類としてサイン欄つきのPDFは有料サービス...

jsでCanvasに画像を描画して画像の色を取得するプログラム・サンプル

画像から色を取得する方法画像をCanvasに書出する。そのあと、Canvasの座標位置からカラーを取得する。サイズが決まっていない画像をCanvas描画する Canvasの縦横のサイズがわからないので、js-でCanvasを自動生成して...

jsで画像のtype=”file”アップロードと画像のチェック

inputのtype="file"からアップロードした画像を確認する＜inpt type="file"＞で参照してアップロードしたファイルは、サーバーに保存されていない。 HTMLのinputタグはHTML5から実装されたブラウザの機能。...

AdSence広告の設置のやり方と複数の広告表示方法

ブラウザでAdSenseのエラーが表示される PHP //トラッキングエーラー googleads.g.doubleclick.net からの参照は、Google ディスプレイネットワークに表示される広告（AdSense）からの参照で、リ...

テキストエディタQuill.jsのカスタマイズで画像保存、POST送信の準備

WYSIWYG(ウィジウィグ)エディタ What You See Is What You Get (見たままをゲットする)エディタテキストエディタ、Quill.jsの画像保存に注意 Quill.js標準の設定の場合は、画像の一時保存の状態...

CodeプログラムコードをCSS装飾して表示するcode-prettify

code-prettifyでCode、プログラムコードを装飾する方法 code-prettifyで簡単にプログラムコード部分をCSS装飾する。 code-prettifyで提供されている言語 default Prettifyが自動的に判別し...

WEBページの構造化についてのおさらい

人がWEBページを閲覧するようではなく、情報をシステム側にわかりやすくjsで記載をまとめた内容を「WEBページを構造化」するという。構造化とは。WEBページの情報をjsで表記して、ページの内容をわかりやすく検索システム側に伝えることを目的...

テキストエディタ、Quill.js実装と日本語化のカスタマイズのサンプル

テキストエディタquilljsを実装する方法 Quill.jsには「snow」「bubble」というテーマがあり、それぞれツールバーの表示方法に違いがあります。「snow」はエディタの上にツールバーが表示されるテーマ。 headタグ内にjs...

テキストWYSIWYGエディタ、Trixを導入設置する

オープンソースのWYSIWYGエディタである、Trixを導入する。 Trixは、Basecamp社製であり、MIT Licenseで公開されている。著作権表示、MITライセンス全文の記載等を遵守すれば、商用利用が可能。公式サイト Trix...

記述したソースコードをWEB上で装飾して表示するSyntaxHighlighterを設置導入する

SyntaxHighlighter ソースコードを公開する際、簡単に見栄えを良くすることができるSyntaxHighlighter。SyntaxHighlighterは見栄えだけではなく、印刷やクリップボード、ソース表示などの機能も付いてる...

Googleサービス連携が容易なクラウド型モバイル向け統合開発ツールFirebase

Firebaseとはモバイルアプリ開発のバックエンドの機能をすばやく、簡単に用意するための統合ツールであるmBaaS。アナリティクスとの連携でログ取得の自由度が高い。ビズリーチFirebaseマーケティング事例のプレゼン資料slidesh...

WYSIWYGエディターでHTML記述の入力サポート

WYSIWYGエディターヴィジュアルエディターともいう。視覚的にブログページなどの記事をつくるとき、HTMLに自動で変換してくれるエディター。WordPressをはじめ、多くのCMSで導入されている入力サポートツール。参照：WYSIW...

phpでPDFファイル書出_ヘッドレスクロムHeadless Chrome の使い方

Googleクロムの実装クロムブラウザ以外のWEBページにクロムと同じ機能を実装させて表示させるヘッドレスクロムを使うことで、ブラウザでの表示機能の幅を広げる。利点としてはPDF書き出しなどの機能が使えることがよい。参照 PDF書き出し...

Js写真がない場合別の写真を表示する

該当写真がない場合別の写真を表示するonError　エラー時のイベントonErrorイベントで画像のリンクを変更する PHP <img src="hoge1.png" onError="this.src='hoge2.png'"> 文字を表...

入力フォームの入力チェック　jQuery-Validation-Engine

jQuery-Validation-Engine　をダウンロード公開サイトの　DownloadZip　からZIPファイルをダウンロード必要なファイル CSSファイル /css/validationEngine.jquery.css jQ...

javascriptでPC版とスマホ版のページ切り替え

スマホ版のリンクのURLに識別子を設定するスマートフォン版からPC版に戻る際にURLの末尾に ?mob=1 を設定。PC版が表示された際に（ ?mob= 数字 )がない場合はスマホ版を表示する。 PC版サイトに切り替えのjavascri...

アニメーションでページをめくる効果 BookBlock

シャドウにもこだわった、滑らかで美しいアニメーションでページをめくるスクリプト -BookBlock 「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。 PHP <scrip...

Google Maps JavaScript API v3 で住所から地図を表示する

2013年６月現在APIキーを取得するようになっている。 APIキー取得　 ■プロジェクト名初めてのときは「Create project...」　で新規作成。All Projectから　「Rename」でプロジェクト名を付ける。 ■サービス...