numbers
03.29.2021

highlight.jsに行番号を追加する方法

highlight.jsを使ってソースコードを綺麗に表示するだけでも充分なのですが、行番号があるとコードの解説がしやすいですよね。 この記事では、highlight.jsで整えたコード表示に、行番号を入れる方法をまとめました。 開発者さんのGitHub(https://github.com/wcoder/highlightjs-line-numbers.js/)のREADME.mdファイルに導入方法が説明されています。 まだhighlight.jsを導入していない場合は、こちらの記事を先にお読みください* ライブラリの読み込み <head></head>タグ内で読み込んでいる highlight.js コードの部分を下記のように変更します。 変更前 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <script>hljs.highlightAll();</script> 変更後 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <!-- highlightjs-line-numbers.js: 行番号の追加 --> <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad(); //行番号用の起動コードを追加 </script> 上記のように行番号表示用のコードを入れると、私の場合はこのようになりました。 CSSでデザインを整える 枠線や数字の幅などいろいろと気になったので、私の場合は下記のようにデザインを変更しました。 /* 枠線の削除 */ .hljs-ln { margin-bottom: 0; border: none; } .hljs-ln tr, .hljs-ln td { border: none; } /* 行番号 */ .hljs-ln-numbers { font-family: inherit; -webkit-touch-callout: none; /* スマホ等で長押しで表示されるポップアップメニューの非表示 */ -webkit-user-select: none; /* コードコピー時に行番号が除外されるようにする */ -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #ccc; /* 行番号の色 */ vertical-align: top; padding-right: 10px; width: 2rem; /* 番号の幅 */ min-width: 2rem; /* 番号の最低幅 */ } .hljs-ln-code.hljs-ln-line { …

chicks making sounds
02.21.2021

クリックで音が出るボタン: 1種類の音声ファイルのみで作る場合

こちらの記事で紹介した音の出るボタンですが、私は音声データが .mp3だけでも良いかなと思ったので、.mp3ファイルだけで音の出るボタンを作った方法もメモにしました。 この素晴らしいボタンの開発者SyncerさんのページからJavaScript(「sounds-multi.js」)をダウンロードするところまでは上記の記事と同じです。 ダウンロードしたJavaScriptを所々コメントアウト 方法は、ダウンロードしたJavaScriptファイルのうち数カ所削除、もしくはコメントアウトするだけです。 コメントアウトしてちゃんとボタンが動いているのを確認できたら、そのコメントアウトの部分は削除してしまっても良いと思います(思った動作をしない場合は、キャッシュを削除してからもう一度確認してみてください)。 削除またはコメントアウトする部分は下記です。 // コメントアウトする部分 // 37行目 var setDir = './' ; // 音声ファイルがあるフォルダ(最後は[/]) // 62, 63行目 if( audio.canPlayType( 'audio/mp3' ) ) { // 65行目〜71行目 } // ブラウザが[.wav]に対応している場合は[.wav]を読み込む else if( audio.canPlayType( 'audio/wav' ) ) { audio.src = setDir + file + '.wav' ; } さらに、64行目についても削除またはコメントアウトし、その下にaudio.src = file;を追記します。(64行目と同じコードから「setDir + 」と「 + '.mp3' 」を除いた部分。) // 64行目: オリジナルをコメントアウト // audio.src = setDir + file + '.mp3' ; // その下に下記を追記 audio.src = file; 上記の結果、私のファイルは最終的にこのような感じになりました。 (下記はSyncerさんの「sounds-multi.js」を一部コメントアウト・加筆したものです。上記で示している行数はダウンロードしたオリジナルのJavaScriptのものなので、下記の行数とは異なります) // グローバル変数 var syncerSounds = { flag: {}, currentTime: null, }; // 即時関数 (function () { // 設定 var setClass = 'sounds'; // ボタン要素のクラス名 //var setDir = ''; // 音声ファイルがあるフォルダ(最後は[/]) var setStopButtonId = 'stop-button-syncer'; // …

chicks making sounds
02.20.2021

クリックで音が出るボタンをWordPressで実装する方法

クリックすると音が出るボタンを作成することができ、とっても感激したので、WordPressでの利用方法についてご紹介します!Syncerさんの「クリックすると音が鳴るボタンの作り方」を見ながら作成させていただきました。 応用方法はいろいろですが、例えば、こんなボタン「」を作っていきます( 部分を押してみてください。こちらの音声データはsoundoftext.comにて作成しました。) 私はアイコンをボタンにしましたが、画像やテキストなど、何でも音が出るように作成することができるようです。開発者さんが公開されているJavaScriptを利用します。 JavaScriptファイルをダウンロード 前述の開発者さんのページ下部にあるJavaScriptファイルをダウンロードします。私はページ内に複数個違う音声データのボタンを入れたいので「sounds-multi.js」を選びました。 続いて、ダウンロードしたファイルをテキストエディターで開き、37行目あたりにある「./」を削除します。この行ではボタンに使用する音声データのアップロード先を指定しています。(私は「Visual Studio Code」でテキストファイルを編集しており、見やすくてお気に入りです。ご参考までに。) // オリジナル var setDir = './'; // シングルクオテーション内を空にする var setDir = ''; メモ 「./」はカレントディレクトリという意味。削除しなくても後述のように音声データをURLで指定すると普通に再生できたのですが、念の為削除。 JavaScriptファイルをWordPressへアップロード 次に、上記のファイルを使用中のテーマフォルダ内の任意の場所にアップロードします。私は使用しているテーマフォルダの中にJavaScriptファイルがまとまって入っている「js」というフォルダがあるので、そこにアップロードしました。 このファイルまでのパスは次のステップで使います。 JavaScriptファイルの読込み footer.phpの下部等にある</body>タグの前に、下記のコードを追記。どこにファイルをアップロードしたかにより、2行目の「src=""」の内容が多少違ってきます。 </body>タグは大概footer.phpの下の方にあると思いますが、使用するテーマにより異なるかもしれません。 <!-- クリックで音が出るボタンのJavaScript読み込み --> <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/sounds-multi.js" ></script> メモ 私の場合は public_html > wp-content > themes > 使用中のテーマ名 > assets > js に上記のJavaScriptファイルをアップロードしたので、上記の「/js/」の前に /assetsを入れました。 ボタン作成のためのデータを準備 音の出るボタン作成のためには音声データが必要です。このボタンの開発者Syncerさんのページでは、無料で使用できる効果音配布サイトがいくつか紹介されています。 音声データは .mp3 や .wav ファイルだと、だいたいのブラウザで再生できるようなので、できるだけ .mp3 と .wav 両方用意します。 追記 caniuse.comで各ブラウザの音声ファイル対応状況を調べたところ、現時点では.mp3ファイルでおおよそのブラウザに対応していそうでした。なので、.mp3のみでいいかなと思う場合は下記を合わせてご参照ください。 話を戻して、.mp3、.wav、いずれかの音声データを取得したら、音声変換サイトなどを利用してもう片方のファイルを作ることができます。Online Audio Converterというサイトで .mp3 ファイルを .wav ファイルに簡単に変換できます。 変換が終わると画面が変わるので、「ダウンロード」を選択。 手元に準備できた .mp3 、.wav ファイルは両方とも拡張子の前にある名前を揃えてからWordPressにアップロードします。(例.「hello.mp3」、「hello.wav」) もし画像をボタンにしたい場合には、合わせて画像データを準備し、アップロードします。こちらは特に拡張子やファイル名など気にする部分はありません。 実際にボタンを作成、動作確認 音の出るボタンにしたいものを下記のような<a></a>タグで囲ってあげると、アイコン、画像、テキストなどが音の出る素敵なボタンになります。 <a href="#" class="sounds" data-file="音声ファイルのURLから拡張子を消したもの"> <img タグなどなど > </a> 例えばこんなかわいい画像を音の出る仕様にしてみました。ひよこをポチッと押してみてください。(音声データは「効果音ラボ」さんからダウンロードさせていただきました。) ひよこの画像を、下記のような<a></a>タグで囲ってあげると音が出る画像になります。下記は見やすいように改行しましたが、改行なしでも大丈夫です。 <!-- 音の出るボタン --> <a href="#" class="sounds" data-file="https://example.com/wp-content/uploads/chick"> <img src="https://example.com/wp-content/uploads/chicks.png"> </a> 音声ファイルのURLは、メディアのライブラリで該当の音声ファイルを選択し、「URLをクリップボードにコピー」という部分を押すと簡単に取得できます。ただし、この音の出るボタンの<a></a>タグ内に書き込む際には拡張子(お尻についている .mp3 等)を削除します。 テキストやアイコンについても同じような要領で音の出るボタンにできます。 使い方の一例 私は外国語について記事を書く際に、発音の出るボタンを作れたらいいなと思っていたので、下記のように使っていきたいと考えています。(以下、言語音声はsoundoftext.comで作成) 言葉 発音 …