Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

HTML

Remark・Rehype で Markdown から HTML に変換してプレビューを確認できるオンラインエディタを作った

メインサイト Neo's World は、自作のビルドシステムでブログを配信している。Markdown で記事を書くと、Remark・Rehype プラグインを駆使して HTML 形式に変換して配信できるのだが、ローカル開発環境を用意せずとも簡単にプレビューできたらいいなと思い、…

link 要素の canonical 属性で URL を正規化する

メインサイト Neo's World で独自ドメインを取ったことに伴い、元の URL である http://neo.s21.xrea.com/ と、独自ドメイン https://neos21.net/ とで同じコンテンツが表示されることになってしまった。 neos21.net は neo.s21.xrea.com でホスティングされ…

Rehype プラグインで Prism.js によるシンタックスハイライトを自動適用する

コードのシンタックスハイライトというと highlight.js をよく使っていたが、同じくらい人気のライブラリとして Prism.js というモノもあるらしい。 Prism GitHub - PrismJS/prism: Lightweight, robust, elegant syntax highlighting. 通常、Prism.js を単…

Rehype プラグインで Markdown からキレイな HTML ドキュメントを生成する

Markdown から HTML にパースしてくれる、Remark・Rehype プラグイン。コレまでも色々なプラグインを紹介してきたが、生成される HTML のインデントなど整形されておらず、読みづらかった。また、html・head・body 要素などがイマイチで、素のままだと正しい…

Rehype プラグインで HTML の見出し要素にリンクを貼る

GitHub で表示される Markdown や Bootstrap のドキュメントなんかで、見出しにカーソルを当てると左右に $ とか # みたいなアイコンが表示されて、コレが該当の見出しへのパーマリンクになっているモノがある。 自分で HTML を書くと、以下のように実装する…

Remark・Rehype プラグインで文書の見出しに自動で ID を振り目次リストを自動生成する

Markdown や HTML をパースして加工できる Remark・Rehype のプラグイン紹介。今回は見出しに id 属性を自動付与し、目次 (Table of Contents・ToC) を自動生成してくれるプラグインを紹介する。 Markdown から HTML にパースする際に見出し ID と目次を自動…

Remark・Rehype を使って Markdown から HTML に変換する

Gatsby.js を使っていて、Markdown ファイルをブログ記事として投稿できる gatsby-transformer-remark というパッケージを使ってみた。 gatsby-transformer-remark | Gatsby プラグインを入れていくと、Frontmatter と呼ばれる YAML テンプレート部分を解釈…

クエリ文字列を連想配列に変換する簡単なやり方 (URLSearchParams)

location.search で取得した ?hoge=fuga&foo=bar みたいなクエリ文字列をパースする時に、コレまでは npm の query-string パッケージを使ったりしていた。 参考:query-string - npm もしくは、次のように自分でパースしてみたこともあった。 // slice(1) …

Fire 7 タブレットを Echo Show っぽくするためにフルスクリーン表示する時計アプリを作った

2019年モデルの Fire 7 は、Alexa が使えるが、Echo Show モードが使えない。開発者オプションにて電源接続時にスリープにしない設定は出来るので、フルスクリーンで常時表示させられる何らかの画面が作れたら面白いかな?と思った。 Android OS および Fire…

input[type="button"] と button 要素、どう使い分けるべきか

input[type="button"] input[type="reset"] input[type="submit"] と、 button 要素 button[type="button"] button[type="reset"] button[type="submit"] は、それぞれ通常ボタン、リセットボタン、送信ボタンを実現できる。 昔は input 要素しかなくて、後…

Neo's Hatebu に利き手モード、アクセスキー、件数表示機能を付けた

自分だけが使っている、オレオレはてなブックマーク閲覧アプリの Neo's Hatebu。 neos21.hatenablog.com 久々に機能追加をしたので、紹介していなかった過去分と合わせて紹介する。コード全量は以下で確認できる。 github.com 利き手モード切り替え アクセス…

Vuetify を使って困ったところ小ネタ集

Vue CLI + TypeScript + SCSS + Vue-Router + Vuex なプロジェクトに、$ vue add vuetify で Vuetify を追加した。 Vuetify はマテリアルデザインを実現するフレームワークだが、細かなところでデザインを調整したい時に上手いやり方が分からないことがあり…

家族が生まれてから何日経過したかを計算する Web アプリを作った

自分は 30k という Chrome 拡張機能を入れている。コレは自分の生年月日を入れておくと、新規タブに「生まれてからの経過日数」を表示してくれるというモノだ。 参考:30k - Chrome ウェブストア 人生80年とよく云われるが、コレを日数に直すと、人間の一生…

Angular で accesskey 属性を使ってキーボードからボタンを押下する

拙作の Angular アプリ「Neo's Hatebu」を、個人でちょくちょく使っては手直ししている。 neos21.hatenablog.com このアプリは、はてブのエントリごとに「削除する」ボタンが付いていて、一度読んだエントリを非表示にできるというモノ。スマホで見る時は「…

リポジトリごとの GitHub Pages でルート相対パスを使うには

GitHub Pages でルート相対パスを使う時の荒業。 ルート相対パスとは? GitHub Pages におけるルート相対パス User Site の場合 Project Site の場合 base 要素でも直せない JavaScript でなんとかしてやろう… 以上 ルート相対パスとは? HTML から画像やス…

昔懐かしの HTML を久々に書いてみた。「Legacy of HTML」

「ポケモンだいすきクラブ」などのサイトを見てウェブサイトというモノに興味を持ち、1998年に発売された「ホームページビルダー2000」を使って作ったのが、自分の最初の「ホームページ」だったと記憶している。その後、「ホームページビルダー2001」、どこ…

Xcode10・iOS12 にアップデートしたら Cordova アプリの UI が英語表現になった

事象 調査 原因特定 対処法 解決 事象 Cordova アプリ内で、input type="date" を使っている箇所がある。input type="date" は、iOS の場合は年月日をドラムロールから選択する UI で表示され、通常の日本語環境では YYYY / MM / DD 形式で表示され、ドラム…

Twitter の埋め込みツイートを中央寄せする方法

Twitter の個別ツイート画面右上のメニューより、「このツイートをサイトに埋め込む」を選ぶと、次のような HTML コードが取得できる。 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"> …… (以下略) コレを Web ページに貼り付けると、埋め込みツイートが表示できるワケだが、このブロックが左寄せで表示さ</p></blockquote>…

Markdown の中で Markdown 記法を回避するための数値参照文字

マークダウンでテキストから電子書籍を作ろう作者: 柏原基規発売日: 2015/11/10メディア: Kindle版この商品を含むブログを見る Markdown 記法の説明なんかで、「コードブロックの書き方」をコードブロックで書いたりしたくなることがあるかもしれない。 そん…

Angular アプリを GitHub Pages に公開する際、ルーティングによる 404 を回避する、具体的な実装方法

以前書いた以下の記事の詳説。 neos21.hatenablog.com 事象のおさらい アプリのビルド時は Base Href を変更する 404.html からリダイレクトする AppComponent でリダイレクト処理を行う そもそも HashLocationStrategy を使う? 事象のおさらい Angular ア…

js-beautify を使ったコード整形ツールを Angular アプリとして作った

HTML・CSS・SCSS・JavaScript・JSON あたりをサクッと整形してくれるツールが欲しく、かといって色々なオンラインサービスをいちいち開くのもダルいので、希望のツールを自分で作ってみた。 Angular Utilities - JavaScript Beautifier … JSON 整形にも対応 …

君は <meta http-equiv="page-enter"> を覚えているか

それは IE 4〜5.5 が全盛の頃の話…。 昔の「ホームページ」は、ページ遷移の時にワイプやフェードインといった効果を付けていたのだ。 今回は、今は亡き「Page-Enter」と「Page-Exit」によるページ間トランジションの回顧話。 Page-Enter とは Page-Enter と…

HTML ファイルだけで Markdown を Wiki 風に表示できる「MDWiki」を試してみた

HTML ファイル1つだけで Markdown ファイルをパースして表示してくれる、MDWiki というツールを試してみた。 Markdown ファイルをパースして HTML 表示してくれるツールというと GitBook などがあるが、HTML ファイル1つだけという最強の手軽さが売り。早速…

ruby 要素によるルビとスタイリング

いちばんよくわかるHTML5&CSS3デザインきちんと入門 [ 狩野 祐東 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 2,678円 ふと思い立って、ruby 要素を使った時のルビを CSS でスタイリングできないか調べてみたが…

メインサイト Neo's World のデザインを変更した

メインサイトといいつつ、開設開始からの日数が一番長いだけという Neo's World だが、2018年2月4日にデザインを変更した。今回はその詳細を書き留めておく。 伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール作者: 高橋佑磨,片山な…

onerror イベントで img・script 要素の読み込みエラーをうまく検知できなかったら

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん作者: たにぐちまこと出版社/メーカー: マイナビ出版発売日: 2017/03/27メディア: 単行本(ソフトカバー)この商品を含むブログを見る img 要素や script 要素に対し、onerror 属性を設定した…

iOS・MacOS をクラッシュさせる「chaiOS」は何をしていたのか

iOS 11 Programming Fundamentals With Swift: Swift, Xcode, and Cocoa Basics作者: Matt Neuburg出版社/メーカー: Oreilly & Associates Inc発売日: 2017/10/19メディア: ペーパーバックこの商品を含むブログを見る 少し前に、iOS や MacOS をクラッシュさ…

Web ページ中の画像が読み込めなかった時に処理させる

HTML&CSSとWebデザインが 1冊できちんと身につく本作者: 服部雄樹出版社/メーカー: 技術評論社発売日: 2017/07/21メディア: 大型本この商品を含むブログを見る Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集作者: 久保田涼子出版社/メーカ…

Cordova アプリの Content-Security-Policy 設定について

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)作者: 大友聡之,坂手寛,清水崇之,城口良太,高木基成,床井幹人,野島祐慈,渡辺俊輔出版社/メーカー: 翔泳社発売日: 2013/03/12メディア: 大型本 クリック: 1回この商品…

2018年の Favicon 設定

よくわかる HTML5&CSS3ウェブサイト構築の基本と実践 (FOM出版のみどりの本)作者: 富士通エフ・オー・エム株式会社(FOM出版)出版社/メーカー: 富士通オフィス機器発売日: 2015/09/15メディア: 大型本この商品を含むブログを見る Favicon って2007年ぐらいに…