「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います！ 十三音鍵盤のコード Tone.jsのチュートリアルから音色情報を調べる AMSynth() DuoSynth() FMSynth() Instrument()は鳴らない！ MembraneSynth() MetalSynth() 最後に ※参考：前回の記事 【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した - クモのようにコツコツと ※注意：本投稿のCodePenの鍵盤を叩くと音が鳴ります。 十三音鍵盤のコード まずは前回のおさらい。作ったのはこちら。 「ポーン」といった感じの音ですね。 JSのコードはこちら //DOM var Key = document.querySelectorAll('#piano li'); //シンセ生成 v

Processingのライブラリで「Handy」というものを見つけました。 いつものスケッチがあっという間にマーカーペンでぐしゃぐしゃに落書きしたような ポップな絵柄に生まれ変わります。 ダウンロードはこちらから。 giCentre: Handy Processingへはマニュアルでインストールします。 Processingのスケッチが保存されているフォルダ(Documentsフォルダの下のProcessingフォルダがデフォルトのはずです)の中に、 「libraries」というフォルダをつくり、そこに上記サイトからダウンロードしてきたzipを解凍します。 使い方はこちらに書いてあります。 giCentre | Using the HandyRenderer 今回は上記ページを翻訳し、まとめたものを以降に書こうと思います。 -- 使い方 上記のようにインストールした後、Processing

これからZipファイルを作るなら、①がオススメです。 すでにZipファイルをお持ちで、パスワードを付けたい場合、②が便利です。 ①：zip -eコマンドを使う ターミナルでzip -eコマンドを使えば、Zipファイルの新規生成・暗号化を同時に実行できます。 デスクトップに保存した、画像ファイル3点をZip化するケースで説明します。

お好みのパスワードを生成（自動作成）することができるツールです。 パスワードに使用する文字の種類（数字、英文字、記号）、文字数の長さ、生成する個数を指定可能です。 ご希望のセキュリティ強度、文字、文字数、個数がございましたらご入力、ご選択後に「生成」ボタンをクリックしてください。 再度、「生成」ボタンを押すことで新しいパスワードが生成されます。 ※生成されたパスワードはテキストファイルにてダウンロード可能です。 「パスワードデータをダウンロード」ボタンをクリックしてダウンロードしてください。 ※スマートフォンやタブレットでご利用の方は、生成されたパスワードを直接コピーしてご利用ください。 ※文字数は最大40文字まで、個数は最大1000個までとなります。 ※文字の「記号あり」で任意の記号が選択可能になりました。 ※文字の「頭文字の指定」で頭文字に「英字（大文字）」「英字（小文字）」「数字」が

Search Replace DBがVer4～にアップデートされていたので記事をリライトしました。以前のバージョンではPHP7.2以上だとエラーが出ていましたが、Search Replace DB Ver4～ならPHP7.3以上でも動作するようです。逆に古いPHP環境の場合はSearch Replace DB Ver3.1.0を使用してくださいとのことです。 WordPressサイトをローカル環境で構築後、本番環境に移行する場合、ドメインの置換をしなければなりません。以前（かなり昔）テキストエディタの置換でやったりしてましたが、これは良くないようです。 「WordPress のDB上のサイトURLを一気に変換」という記事を拝見させて頂いたところ、wp_optionsとかwp_postmetaにはシリアライズされたデータが入ってることもあるので、通常の置換ではプラグインなどに不具合が出る場合

Local by Flywheelは初心者でも簡単にwordpressのローカル環境を構築できるツールです。インストール方法はたくさんの方が説明されていますので、他サイトをご参照ください。使い方と本番環境への移行方法をご紹介します。今回の環境はmac、サーバーはxserverを使ってご説明します。独自ドメインの取得、xserverの契約、ドメインの設定方法は省略します。 Local by Flywheelのダウンロードはこちらから Local by Flywheelの使い方 初期設定 Local by Flywheelのインストールが終了したら、左下の「＋」ボタンをクリック。 初めての方は中央にも「CREATE A NEW SITE」ボタンが表示されますので、こちらのボタンでも大丈夫です。 次にサイト名を入力します。今回は「test」と入力しました。完了したら右下の「CONTINUE」をク

いつもお世話になっております。 wpサイトを移行して、ユーザーのメールアドレスを変更したいのですが、 「メールアドレス変更が承認待ち中です」 となり、すぐに変更が出来ない状態でございます。 いったいこれは何処への承認待ちなのでしょうか？ すでに登録されているメールアドレスの持ち主さんでしょうか？ ご教授くださいませ。

ワードプレスの［メディア・アップローダー］は基本的にSVG画像には対応していません。 管理画面の「メディアを追加」から無理矢理ファイルをアップロードしようとしても「このファイルタイプはセキュリティの観点から許可されていません。」というエラーメッセージが表示されて弾かれてしまします。 Retinaディスプレイへの対応と共に SVG もかなり普及して一般的になりつつある今、WordPressでも手軽に SVG を扱えるようにしたいものです。 そこで、いつものように［functions.php］に追加のコードを記入して「.svg」拡張子の画像をメディアアップローダーで追加できるように設定する方法を紹介します。 SVG ファイルのアップロードを許可する設定 使用中のテーマファイルの［functions.php］に以下のコードを記入します。 add_filter('upload_mimes', 's

2012年に中途でPLAN-B入社。SEOの研究開発を担うR&D事業部にて、デザイン、コーディング、システム面を幅広く担当。SEOを軸にした制作を行う。 WordPressはテーマを入れたら簡単に始めることができる。そんな印象を持っていると思いますが、意外なところにSEO対策の落とし穴が存在します。 canonicalタグの内容が同じページに複数存在しているmeta descriptionタグが表示されていないページが存在しているテーマにもよりますが、デフォルトの設定ではSEOで非常に重要視されるこれらのタグが、正常に機能していない場合があるのです。現在使用されているテーマで、各ページ専用に上記が存在しなかった場合は今すぐ修正しましょう。 修正する方法は簡単です。テーマテンプレートに、今回紹介させていただくコードを追加するだけです。 前回のパーマリンク設定に引き続き、細部まで設定を行って、

WordPress の固定ページで抜粋を表示する方法を紹介します。 投稿と違い固定ページは最初から抜粋機能が使用できないため function.php にコードを追加して機能を有効化する必要があります。 抜粋の有効化 抜粋の表示 抜粋の最後の文字列を変更する 抜粋の有効化 固定ページで抜粋機能を有効化するためには、特定の機能を有効化できる関数 add_post_type_support() を使用します。 例えば、固定ページで抜粋を有効化する場合は次のコードを functions.php に追加します。 /*【出力カスタマイズ】固定ページで抜粋の機能を有効化 */ add_post_type_support( 'page', 'excerpt' ); コードを追加後、固定ページの編集画面に抜粋が表示されていれば問題ありません。 抜粋の表示 有効化した抜粋の表示には the_excerpt

Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.

企業サイトとかアフィリエイト用のサイトだと、 サイトのロゴ上のヘッダー最上部にキャッチコピーとか入れたくなる場合ありますよね。 これたまにどうやったら良いの？って聞かれるので、 本日はWordPressにキャッチフレーズを挿入するカスタマイズ方法を。 ワードプレスの基本機能の『キャッチフレーズ』（このサイトの簡単な説明。ってやつ）を、 サイトのヘッダーに表示させてみようと思います。 １）キャッチフレーズを書く ダッシュボード＞設定＞一般＞キャッチフレーズ まずは、上記の順でたどって、キャッチフレーズをちゃんと書いておきます。 ２）ヘッダーにWordPress標準のタグを挿入する<?php bloginfo('description'); ?>WordPressのキャッチフレーズを表示させる専用のタグは、こんなやつです。 これはもうワードプレスが用意してくれてる世界共通のやつなので、そのまま

カテゴリの説明とは カテゴリの説明とは、Wordpress管理画面から、「投稿→カテゴリー」で表示される以下の部分のことです。 上記の、カテゴリの登録画面で①の部分に「説明」を入力すると、②のように、カテゴリの説明文として登録されます。 入力部分には、HTMLタグも使用できるので、画像を表示させたり、スタイルで強調表示などもさせることができます。 入力画面には、以下のように書かれています。 この説明はデフォルトではあまり重要な意味を持ちませんが、これを表示するテーマも中にはあります。 今回は、この「説明」項目をテーマ側で有効利用するための方法です。 ※Simplicityでは、デフォルトの機能に入っています。 カテゴリページで表示するためのカスタマイズ この「カテゴリの説明」を、カテゴリページで表示するには、Wordpressのテンプレート（category.phpなど）に以下のように追加

こんにちは！あきばはら（@tsurare01）です。 ブロガー向けの記事になります。 今回紹介する「最後まで読まれる書き方」というのは、「最後まで読まれない書き方」とも言えるかもしれません。 先ほど、こんな記事を読みました。 shijinblog.hatenablog.com あなたはブログを書くときに「起承転結」って意識してますか？（ブロガー向けなので「あなた」にしますね。「おれブログ書いてねーし」とか言わないでください。） ブログに「起承転結」っていらないと思うんですよ。 ブログの記事ってほんと人それぞれで、エッセイのようなブログ、WEBメディアのようなブログ、日記のようなブログとほんとに多種多様です。 今回はうちのブログのような記事の書き方についてですが、あまり起承転結って意識してません。いや、意識してないのは「転」だけかも。どんな感じで構成してるのかというと「結起承結」くらいな感じ

【起承転結】 文章を書くときは起承転結をしよう！ これは小学生の時に誰でも習った文章を書くセオリーである 「起」 何かがはじまって、もしくはブログの記事の題材があってその事を書き出す 「承」 その言葉の通り自分の最初に選んだ題材に添ってそれを肉付けする用に文章を書いていく 「転」 ここで転じる、大きな変化や驚く様な展開に持って行く 「結」 これこれはこうだからこうだと思う、こうするべきなど自分の意見や客観的な正解の意を唱える とここまでは自分の思う起承転結を書いてみた 【ちなみに起承転結の本来の意味】 起承転結（きしょうてんけつ）とは、4行から成る漢詩（近体詩）の絶句の構成を指す。一行目から順に起句、承句、転句、結句と呼ぶ。 もとの中国語（漢文）では、起承転合である。 起: 歴史や人事を題材とし、比喩や連想から詠み始めることにより、様々な展開が出来るとする。 承: 「穏健」に作るべきである