「周回遅れでもWebGLを事始める！」で「WebGLの機はとっくに熟している」と書きました。 もう一つ、2018年事始めたいマイテーマに「Web Audio API」というものがあります。こちらも徐々に機が熟しています。 いっちょやってみっかー、と自分を奮い立たせるためにWeb Audio APIの概要と状況をまとめました。 目次： Web Audio APIとは Web Audio APIでできること バーチャルシンセサイザー オリジナルの電子楽器1 オリジナルの電子楽器2 ドラムマシン マトリックスシーケンサー ピアノロールシーケンサー WebGL（ブラウザ3D）との融合 Web Audio APIの実装状況 ブラウザ対応状況 ブラウザシェア PCのみのブラウザシェア スマホのみのブラウザシェア タブレットのみのブラウザシェア OSシェア Windows7、IE11のサポート期間 非W

ブラウザでの3D（3次元）を表現する「WebGL」。ほぼ全てのブラウザに対応し、機はとっくに熟している。 かつては3Dを始めるには3D作成ソフトを購入する必要があったが、現在はやりたくなった「今」、始められます。そう、CodePenがあればね！*1 時は来た！それだけだ。 目次： WebGLのサンプル WebGLとは何か WebGLの位置付け canvas要素を配置 終わりに JSの基本についてはこちら ※参考：【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 - クモのようにコツコツと 【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 - クモのようにコツコツと WebGLのサンプル WebGLってどんなもの？どんなことができるの？例えばこんな感じです。 ※参考：WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA ほげ〜〜

「PHPの基本を理解するためにJSと比較する」でWordPressは「PHP書式」とWordPress独自の「テンプレートタグ」で構成されていると書きました。そしてPHPの基本書式について解説しました。 これを踏まえてWordPressのコードを見直すと、「テンプレートタグ」が見つけやすくなります。それではさっそくWordPressのコードを見ていきましょう。 前・後編の2回に分けて書きます。前編はWordPressのファイル構成、テンプレートタグのインクルードタグ、WordPressループを見ていきます！ 目次： WordPressのファイル構成 index.phpのコード WordPressのテンプレートタグ インクルードタグ WordPressループ 最後に 本稿はPHP書式が出てきます。「PHPって何？」という方はこちら ※参考：PHPの基本を理解するためにJSと比較する Word

WordPressをカスタマイズしようとした時に見慣れぬコード郡に戸惑った方（私もです）向け！「PHP書式」と「テンプレートタグ」が識別できるとコードが読みやすくなるよ、という記事です。 「前編」の続きになります。 前編ではWordPressのファイル構成と、デフォルトテーマTwenty Seventeeenのindex.phpファイルを中心に「インクルードタグ」「WordPressループ」について解説しました。 「後編」では、その他の.phpファイルにあるテンプレートタグ、そしてプラグインのメソッドもざっくりと見ていきましょう！ 目次： content.phpのコード 投稿のテンプレートタグ header.php、footer.phpの必須タグ functions.phpのテーマ独自タグ プラグインのメソッド 最後に 前編はこちら ※参考：ざっくりWordPress：PHP書式とテンプレ

「サーバサイドの中でのWordPressの位置付け」で書いたようにPHP*1はサーバサイドのプログラミング言語です。現在、CMSの定番となっているWordPressはPHPで作られています。 WordPressのコードは「PHP書式」とWordPress独自の「テンプレートタグ」で構成されています。この二つが識別できるとWordPressのコードが読みやすくなり、テーマ作成やカスタマイズがしやすくなります。 まずはPHPの基本を理解するために、フロントエンドのプログラミング言語JSとの違いを見ていきましょう。 開始タグと終了タグ コメント 変数 文字列の出力echo 関数 組み込み関数 ユーザー定義関数 無名関数 配列 配列（添字） 連想配列 制御構造 if文（分岐） while文（反復） 最後に 開始タグと終了タグ WordPressのテーマフォルダにある.phpファイルの中を見てみると

WordPressは無料のCMS（コンテンツ・マネジメント・システム）です。 CMSはページの構造（仕組み）とコンテンツ（内容）が分離されており、ブラウザの管理画面でブログのように記事を更新できます。 また、様々な開発者が作成したテーマ（デザインテンプレート）やプラグイン（拡張機能）があり、プログラミングの知識がなくてもサイトを作ることができます。 そしてプログラミング知識があればさらに自由にカスタマイズすることができます。 カスタマイズする時に掴んでおいた方がいいのがサーバサイドの中でのWordPressの位置付けです。 目次： サーバサイドとは サーバサイドの言語 PHPのライブラリ、フレームワーク PHPのWordPressとphpMyAdmin SQLのMySQL 終わりに サーバサイドとは 「Webの基礎知識」の中でも書いたようにWebサイトはサーバ上にあるデータ（静的ページ）を

Pocketの「デジタル積ん読」を消化する日々。状況によってスマホだったりPCだったり。 で、スマホ読書に慣れてくると、だんだんPC表示の一行が長く感じて辛みがある。。 そうだ、CSSのcolumns（段組）でPCとスマホの一行あたりの文字数を統一してみよう！という話。（おまけ：remの利点について） 目次： 一行あたりの読みやすい文字数は？ ページサイズの目安 文字サイズの目安 1行あたりの文字数の目安 PC35文字、スマホ20文字のサンプル そうだ、columnsで二段組にしよう！ 二段組レイアウトの検討 二段組サンプル（20文字） 文字サイズを変えてremの便利さを噛み締める！ 一行あたりの文字数を減らして幅も調整 絶対値（px）と相対値（rem）を使いわけよう テキストボックスを絶対値のピクセルに 文字サイズを変えてもボックス幅は無事 まとめ 一行あたりの読みやすい文字数は？ 読み

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。 第5回は「JSの基本-後編」Webサイトの動作、変更を制御する「JS」の書式。前・後編の後編であり、本連載の最終回！ 連載一覧： 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。 第4回は「JSの基本-前編」。Webサイトの動作、変更を制御する「JS」の書式を前・後編に分けてお送りする！ 連載一覧： 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4（←いまココ） 【JSの基本-後編】

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。 第3回は「CSSの基本」編。Webサイトの見た目を彩る「CSS」の書式を理解する！ 連載一覧： 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3（←いまココ） 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける前に読む！HTML、

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。 第1回は「 Webの基礎知識」編。まずは3言語の役割と違いを理解する！ 連載一覧： 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1（←いまココ） 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける前に読む！HTML、CSS、JS

Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。 第２回は「HTMLの基本」編。Webサイトの文書構造を司る「HTML」の書式を理解する！ 連載一覧： 【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2（←いまココ） 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける前に読む！HT

ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ？表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた！という話。 目次： list-stayleが表示されない！ list-staye表示された！！ display:list-itemを別の要素に当ててみる 子要素にdisplay:inline-blockを適用してみる まとめ ※参考：CSSの基本についてはこちら 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 list-stayleが表示されない！ 表示されなかったリストはこんな感じです。 li要素の中に写真とテキストがありそれを横に並べている。 ちなみにCSSにはブラウザの初期スタイルを解除する「リセットCSS」を設定している。 C

リンクや更新一覧などでタイトルの右側に「＞」アイコンをつけることがよくあると思う。 imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。 テキストの「＞」を配置してもいいけど見た目はイマイチ…。あとシステムフォントによって形が変わる。 アイコンフォントFont Awesomeは色やサイズを調整できるが、太さを調整できないのが惜しい。 ということで、単純な図形なのでCSSだけで完結する方法を検討した。 目次 リンクの「＞」完成見本 HTML CSS原型 CSSで「＞」アイコン追加 まとめ ※参考：CSSの基本についてはこちら 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 リンクの「＞」完成見本 リンクの「＞」ってこーいうやつね。（これはなんと読んだらいいんだろう？） HTML HTMLの構成は下記です。 <h1>リンクでよくある「>」

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ（仮）」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「AltJS」。少ない記述量でJSが書けるメタ言語です。 それでは行ってきます！ 目次： CoffeeScript CoffeeScriptの主な記法 LiveScript LiveScriptの主な記法 TypeScript TypeScriptの主な記法 Babel Babelの主な記法 まとめ ※参考：JSの基本についてはこちら 【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5 ※2019/10/20：この記事上にソースコードがあり

先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。 CodePen Settingの旅。 前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。 アルトいいねのAltCSS！え？オルトと読むって？まぁそういう人もオルト。 目次： LESS LESSの主な記法 SCSS SCSSの主な記法 Sass Sassの主な記法 Stylus Stylusの主な記法 LESS、SCSSのような書き方 Sassのような書き方 さらに省略した書き方 PostCSS プラグイン nested cssnext まとめ ※参考：CSSの基本についてはこちら 【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 ※2019/10/20：この記事上にソースコードがありませんでしたが、

HTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Haml, Slim, Pagなどをよく見聞きしますね。 これらの形式をブラウザで表示するためにはHTMLにコンパイル（変換）する必要があります。その環境構築が第一難関です。 が！CodePenを使えば環境構築なしにテンプレートエンジンを体験することができます！！早速やってみました。 目次： CodePenのSetting（設定）変更 Emmet Haml HAMLの主な記法 コンパイル後のコード表示 Markdown Markdownの主な記法 Slim Slimの主な記法 Pug Pugの主な記法 おまけ：EJSもオススメ（追記） まとめ ※参考：HTMLの基本についてはこちら 【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2 ※2019/10/20：この記事上にソースコードがありませんでしたが、追

はてなブログで外部サイトやSNSが埋め込められるか検証してみたい。 ※ Qiitaで検証した記事と同じ内容になります。 Codepenの<iframe> 埋め込みコード <iframe height='265' scrolling='no' title='Babel practice 1' src='//codepen.io/i_ryo/embed/GvzKYK/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/i_ryo/pen/GvzKYK/'>Babel pr

2024-07-21 【Rails】ユーザー登録、ポスト投稿、フォロー機能など（Railsチュートリアル第11〜14章の概要メモ） Railsチュートリアル Ruby on Rails Ruby Railsチュートリアルの続きです。前回は7〜10章まで進み、データベースのユーザーのモデルを作成を行いました。その後、ついに最終章の14章まで完走しました！ユーザー登録、ポスト投稿、フォローなどの機能を追加して、Sampleアプリケーションが完成しまし… 2024-06-18 【Rails】CRUD処理など（Railsチュートリアル第7〜10章の概要メモ） Ruby on Rails Railsチュートリアル Ruby Railsチュートリアルの続きです。しばらく間が開きましたが、その間にチュートリアルの第7〜10章まで走破しました！ここからは各章の概要をメモする形にします。第7〜10章ではユー