Corredor

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

HTML

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年ぐらいに…

HTML ファイル内に CSS や JS をインライン挿入する「html-inline」

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト出版社/メーカー: ボーンデジタル発売日: 2017/11/04メディア: 単行本(ソフトカバー)この…

Angular アプリを GitHub Pages に公開する際、ルーティングによる 404 を回避する

GitHubツールビルディング ―GitHub APIを活用したワークフローの拡張とカスタマイズ作者: Chris Dawson,Ben Straub,池田尚史,笹井崇司出版社/メーカー: オライリージャパン発売日: 2017/05/10メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を…

CordovaCallNumberPlugin を使って電話発信と連動処理

パナソニック デジタルコードレス電話機 子機1台付き 迷惑電話対策機能搭載 ホワイト VE-GD25DL-W出版社/メーカー: パナソニック発売日: 2017/02/16メディア: エレクトロニクスこの商品を含むブログを見る CordovaCallNumberPlugin を使うと、Cordova アプリ…

Geolocation API を使って JavaScript だけで位置情報を取得する

HTML5 Geolocation: Bringing Location to Web Applications作者: Anthony T. Holdener III出版社/メーカー: O'Reilly Media発売日: 2011/05/24メディア: Kindle版この商品を含むブログを見る Cordova アプリで位置情報を取得する際は cordova-background-ge…

iOS Safari でフルスクリーンモードにするページのタイトルを変更する

Mac Fan 2017年10月号 [雑誌]出版社/メーカー: マイナビ出版発売日: 2017/08/29メディア: Kindle版この商品を含むブログを見る 最近 (今頃?) マイブームな iOS Safari のフルスクリーンモード。任意の Web ページを「ホームに追加」したときの挙動を Web ペ…

iOS Safari から追加したフルスクリーンモードアプリのステータスバーの表示仕様を変える

サファリ (しかけえほん)作者: キャロルカウフマン,ダンケイネン,Carol Kaufmann,Dan Kainen,きたなおこ出版社/メーカー: 大日本絵画発売日: 2013/07/16メディア: 大型本この商品を含むブログを見る 前回紹介した、apple-mobile-web-app-capable による「ウ…

iOS Safari で Web ページを「ホームに追加」した時にフルスクリーン表示にする

Safari(サファリ) 2017年 11 月号出版社/メーカー: 日之出出版発売日: 2017/09/23メディア: 雑誌この商品を含むブログを見る iPhone などの Safari で任意の Web ページを開いている時に、下部のメニューから「ホームに追加」という項目を選択できる。コレを…

自サイトの開発環境を作った

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)作者: 和田裕介,石田絢一(uzulla),すがわらまさのり,斎藤祐一郎出版社/メーカー: 技術評論社発売日: 2014/04/15メディア: 大型本この商品を…

Cordova アプリでサクサク動く Google Map を実現する「cordova-plugin-googlemaps」

Google API Expertが解説する Google Maps APIプログラミングガイド作者: 勝又雅史,古籏一浩,石丸健太郎,安藤幸央出版社/メーカー: インプレスジャパン発売日: 2011/12/02メディア: 単行本(ソフトカバー)購入: 2人 クリック: 69回この商品を含むブログ (8…

はてなブログでページの1つ目の記事末尾にだけ AdSense 広告を挿入する JavaScript を作った

はてなブログは各記事の下部に任意の HTML コードを仕込めるが、これはトップページやカテゴリページなどにも有効なエリアなので、ココに Google AdSense 広告のコードを埋め込んでしまうと、記事ごとに AdSense 広告が掲載されるようになってしまう。 2016…

input[type="file"] のデザインを簡単に変える方法

ファイルを選択する input[type="file"] は、大抵テキストボックスとボタンで構成されているが、それらを個別にデザイン変更したりすることができない。 そこで、このファイル要素を label 要素で囲み、その中で別にボタンを作ってやることで、簡単にデザイ…

はてなブログで独自のシェアリンク・フォローボタンを作る HTML・CSS

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2016/10/01メディア: 単行本この商品を含むブログを見る 前回の記事で、はてなブログ公式プラグインではなく、独自のシェア…

ブラウザのステータスバーに遷移先 URL を表示しないようにできるか

社内で「ブラウザのステータスバーに遷移先 URL を表示しないようにしたい」というバカげた要件が出てきていて解決方法を探っているチームがいて、数日迷っていたので以下の StackOverflow を見せてみた。 参考:javascript - HTML - overRide statusbar lin…

iPhone 上で HTML とか CSS とか JS とかをコーディングして動作確認できるアプリ

App Store でプログラミング言語名で検索すると、大抵の言語は実行環境付きのエディタアプリが存在する。 たとえば Java … JVM Programming Language - Learn & Programs Compiler ※このアプリの作者 Yauheni Shauchenka さんはいろんな言語のエディタを出し…

textarea 要素内の placeholder 属性で改行するには

前回の記事で placeholder 属性というものを紹介した。 neos21.hatenablog.com placeholder 属性は1行テキストボックスだけでなく、テキストエリアにも使える。そして、テキストエリアでも使えるということは、プレースホルダの文言も改行できるのではないか…

placeholder 属性でテキストボックスにヒントを書く

HTML5 で、placeholder 属性というものが追加されている。これはフォーム部品の初期値を指定するようなイメージだが、value 属性と違って、任意のテキストが入力されると非表示になる、いわばフォーム部品のヒント文言を書くための属性だ。 <input type="text" placeholder="電話番号を入力してください"> Placeholder と…