SE奮闘記

デザインに合わせて、文字の回り込み（インデント）を階段状にしたいと調査しているときの覚書。 pタグの前にfloat属性のタグを置いて、clip-pathとshape-outsideで回り込みさせる。 clip-pathは形状の確認用。 参考サイト 【CSS小技】三角形や台形、変形BOXの内側の形に沿わせてテキストを入れる(コピペOK) - Mill's Note 【CSS】CSSで画像をクリッピング！clip-pathの使い方を解説！ : ビジネスとIT活用に役立つ情報（株式会社アーティス） clip-pathとshape-outsideはモダンブラウザで対応済み。 "clip-path" | Can I use... Support tables for HTML5, CSS3, etc "shape-outside" | Can I use... Support tables for HTML5, CSS3, etc もう三角形を作るのにborderを使う必要ないかも。

他とちょっと違う感を出すためにcanvasを使った3Dアニメーションをホームページに付けてみようと調査しているときの覚書。 HTML5とcanvas要素 canvas要素はHTML5以降で標準化された動的にグラフィックを描画する要素。 canvas要素 - Wikipedia canvas要素自体はIE9以降サポートされている。 "canvas" | Can I use... Support tables for HTML5, CSS3, etc WebGLとJavaScriptライブラリ WebGLは2D/3DグラフィックをレンダリングするJavaScript API。 描画処理にCPUではなくGPUを用いることで高速に処理が可能。 IE11以降と主要ブラウザでサポートされている。 WebGL - Wikipedia WebGL - 3D Canvas graphics | Can I use... Support tables for HTML5, CSS3, etc 簡素なグラフィック描画だけの場合は（CPUを利用した）canvas要素で十分。 3Dアニメーションをする場合はWebGL経由でGPU処理することでサクサク動く。 WebGLは次のようなJavaScriptライブラリを使うのが一般的。 three.js  ・・・3D描画によく使われる PixiJS  ・・・2D描画によく使われる 参考サイト wgld.org | WebGL: WebGL を始める前に canvas を知る HTML5 CanvasとWebGL 【関連記事】 Reactを使ったUIコンポーネント「Material-UI」

web.devのLighthouse でサイトのパフォーマンスを計測したときにfont-displayを使えと教えてくれたので調査したときの覚書。 font-displayはブラウザがフォントを表示するまでの動作を指定。 IE以外は主要ブラウザで対応済み。 font-display - CSS: カスケーディングスタイルシート | MDN Webフォントの場合は「displya:swap;」にして、読み込みをブロックしないように設定した方がいい。 Ensure text remains visible during webfont load | web.dev 【関連記事】 rel="preload"でWebフォント(@font-face)を先読み

htmlのtextareaをコンテンツの高さに合わせたくて調査したときの覚書。 環境： jQuery 3.5.1 CSSのheight: 100%は親要素に合わせてしまう。 textareaの内包している値を全部見えるようにしてスクロールしないようにしたい。 結局JavaScriptでtextareaの内部コンテンツの高さを取得して設定する必要があった。 jQueryを使うとこんな感じ。 jQuery(function($) {   let $textarea = $('#textarea-id');   $textarea.on('keyup', function() {       $textarea.height('auto'); // Initialize       $textarea.height($textarea.prop('scrollHeight') - $textarea.height());   }); }); CSS textarea {   overflow: hidden;   resize: none;   padding: 12px 16px; } スマホの場合は実行しない方がいいかもしれない。

GoogleのPageSpeed Insightsを使ってみたら"<link rel=preload>"をお勧めされたので、導入したときの覚書。 "<link rel=preload>"とは コンテンツの先読みをブラウザに指示できる。 css内に記載しているWebフォント（@font-face）や背景画像（background-image）を指定しておくと体感速度が向上する。 サーバーがHTTP/2に対応しているなら設定することによる効果大。 IEとFirefox以外は対応済み 参考サイト rel=preload によるコンテンツの先読み - HTML: HyperText Markup Language | MDN rel=preloadを極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ] "<link rel=preload>"の実装 Webフォントの場合は下記のようなタグをheader内に記載する。 <link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin /> 注意点 同じサーバー内だとしても「crossorigin」 は必須。 CSSの前に記述する。 ファイル名は案件によって変わるので、共通部分のPHPでwoff2ファイルを検索(glob)して記述することにした。 Chrome DevToolsのNetworkで先読みされているのが確認できる。 【関連記事】 【CentOS】SVGをWOFFなどのWebフォントへ変換するfontcustomをインストール Nginxの設定変更でHTTP/2対応 Web PerformanceについてまとめLink集

Bootstrap v3からそろそろv5に向けて移行しようかと調査しているときの覚書。 今まではアイコンフォントを便利に使っていたけど、これからはSVGアイコンの時代らしい。 環境： Node.js 10.19.0 参考 WEB制作のワンポイント！ SVGアイコンを使うワケ | PINTO! アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう |  Webクリエイターボックス Can I use... Support tables for HTML5, CSS3, etc 使いたいのはBootstrap Icon。2020å¹´3月時点でalpha3 Bootstrap Icons · Official open source SVG icon library for Bootstrap 使い方はsvgファイルを１つのファイルにまとめてIDで呼び出す。 Icon System with SVG Sprites | CSS-Tricks 実際にやってみる。 まずはBootstrap Iconsをインストール $ npm install bootstrap-icons --save-dev node_modules/bootstrap-icons/icons/にsvgファイルがある。 これを一つのsvgファイルにまとめる。 コマンドライン版のsvgstoreをインストール。 GitHub | svgstore/svgstore-cli $ npm install -g svgstore-cli 下記コマンドを実行 $ svgstore -p 'bi-' --inline -o bootstrap-icons.svg node_modules/bootstrap-icons/icons/*.svg 作成されたbootstrap-icons.svgをエディタで開いて確認する。 一つにまとめたsvgファイルは非表示にするため、svgタグにclassを追加しておく。 bodyタグの直下でsvgファイルを読み込む。 適当なところにID記述。 CSS(SCSS)に追記。 // // Bootstrap Icons // svg.defs { ...

作ったサイトを念のためIE8で確認したら画像が表示されないので対応したときの覚書。 環境： Bootstrap 3.3.7, WordPress 4.7.2   １．【準備編】Windows7 + IE8の環境を作る（Hyper-V） 公式サイトでIE8を搭載した仮想マシンがダウンロードできる。 Microsoft Edge Developer website - Microsoft Edge Development 認証が必要。デスクトップに書いてあるのでそのままcmdで叩く。   ２．IE8だけ読み込むCSSを用意 試した結果表示されない原因はdisplay: tableを指定していたから。 画像は基本的に中央揃えにしたかったので、次のように設定していた（lessを使ってる）。 .img-responsive {     &:extend(.img-responsive all);     display: table;     margin: 0 auto; }   他のに影響与えないでIE8のみに対応したかったので、IE8だけ読み込むCSSを用意して、そちらで対応することにした。 bootstrapを使うときにお約束の記述に追記（WordPressの関数を使ってる）。 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <link rel='stylesheet' href='<?php echo get_template_directory_uri();?>/assets/css/ie8.css' type='text/css' /> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.c...

wkhtmltopdfでHTMLをPDF化しているときの覚書。 今までウェブサイトを印刷したときのことは全く考慮してなかった。Bootstrapのデフォルト機能にお任せだったけれど、印刷しても出来るだけ読みやすくなるようにしてみた。 環境： Bootstrap 3.3.7, less 2.7.2   １．印刷したときの横幅 Bootstrapの場合、印刷するとExtra small devices(.col-xs-)が適用される。 Grid System | Bootstrap これは横幅が約547pxになるから。 ＜計算方法＞ A4縦サイズの横幅は210mm 印刷するときのデフォルトマージンが約10mm 画面解像度が72dpi 1インチ=25.4mm、1mm=0.04インチ A4の表示領域：210mm - (10mm x 2) = 190mm mmをinchに変換：190mm x 0.04inch = 7.6inch inchをpxに変換：7.6inch x 72dpi = 547.2px   ２．Bootstrapで印刷用CSS まずはBootstrapのprint.lessをimportしない。 替わりに下記CSSを読み込むと、small device(.col-sm-)が適用されたレイアウトに出来る。 Render Bootstrap as "small" layout when printing | Gist これをlessで表現すると @media print {   .make-grid(sm); } Bootstrapのgrid.lessを参照。 あとの細かい箇所は必要なときに追加していく。 @media screen {} も有用。   < Related Posts > PHPでPDF生成するためにwkhtmltopdfをインストール PHPでPDF生成する方法を調査 PhpStormのファイル監視機能でLESSをCSSにコンパイル

Adobe Dreamweaver CS5.5はMobile Device向けの機能が強化されたり、CMS(WordPressのTheme)開発も簡単に出来るらしいので、実際使えるか調査。 ちなみに私がWeb開発するときに使う主なToolは下記。VMware Fusion以外は全て無料。 Xyzzy … Emacs likeなWindows向けText Editor Subversion + TortoiseSVN … Version管理 FileZilla … FTP Client Firefox + Firebug … 動作確認とDebug Google Chrome + Developer Tools … 動作確認とDebug VMware Fusion or VMware Server … 仮想PC上でIE7, IE8を確認 Dreamweaverはこれらが１つのSoftware上で実現している感じ。だけど、それぞれの機能は専用Softwareには敵わない。機能一覧はOfficial Siteが分かりやすい。 購入ガイド | Adobe Dreamweaver CS5.5 使いこなすにはHTMLやCSSの知識は必須なので中級者向け。Dreamweaverを買ってSiteを構築しようと思っている人がいたら、 Google Site や みんなのビジネスオンライン をオススメしたい。 ただ、Dreamweaver周りの技術系Siteには役に立つ情報が結構多い。 Adobe HTML5 特設サイト Dreamweaver CS5.5 と HTML5 で始めようスマートフォン＆タブレット対応| Adobe - 日本 スマートフォン時代のWebサイト制作 第3回 スマートフォン向けのコーディング | デベロッパーセンター ブラウザーテスト | Adobe BrowserLab HTML, CSS, PHP, JavaScriptをしっかり勉強したあとでEditorとして利用するのは「あり」だと思う。   < Related Posts > VMware FusionにVirtual Machine...

Web SiteにBGMを埋め込んだときの手順をMemo. 環境: Adobe Flash Professional CS5, swfobject 2.2 1. BGM用の曲(MP3)をSWFに Adobe Flash Professional が使える環境なら File → Import → Import to Library ... からMP3をImportして、TimeLine PanelにDrug&Dropすれば完了。ActionScriptは Play(); を埋め込んでおく。 後で気付いたけど、 Flowplayer にmp3を再生する機能があるので、これを使った方が簡単にできる 気がする。   2. PCとMobileを判断してSite埋め込む iPhone, iPadではswfを再生できないので、 前の記事 を参考にPCかMobileかを判断して、Mobileの場合は HTML5のVideo tag を使うようにする。   3. 再生、停止する方法 PCの場合は、 swfobject をつかって、 再生する場合はembedSWF 停止したい場合はremoveSWF すればいい。（今ならFlowplayer + mp3でやる） video tagの場合は下記Siteを参考に。ちなみにiPadで画面読み込みと同時に曲の再生は出来ないみたい。 Safari HTML5 Audio and Video Guide | Safari Developer Library   < Related Posts > 動画(FlowPlayer)の再生回数をGoogle AnalyticsでTrackingする HTML5のVideo Tagを使う際の注意点とiPad, iPhone向けの動画へ変換する HTML5(<video>) or Flashを自動で切り替えてくれるJavaScript Library（iPadやiPhoneでも動画を再生） PHP or JavaScriptでMobile端末(iPad, iPhone, Android)かどうかを...

HTML5のVideo Tagを使うとIE9, iPhone, MacのFirefoxなど特定の環境だけ動画が再生されなくて困ったときのMemo. 結論から言うと、PC Browserでは FlowPlayer などのFlashを使った方が無難。少なくともお客様相手の仕事はそうした方がいい。 VideoJS などのJavaScript Library(HTML5のVideo Tag)を使う場合の注意点。 FirefoxはH.264 codecの動画を再生できない。 参考： Firefox で Youtube の HTML5 動画が見られない | トラブルシューティング | Firefox ヘルプ Google ChromeでもH.264の動画を再生できなくなる 参考： Google ChromeがH.264対応をとりやめ、WebM推進を鮮明に -- Engadget Japanese MP4などの動画を再生するためにはApacheのMime Typeを設定する必要がある(IE)。 参考： MIMEタイプ一覧 : 個人ホームページ / BIGLOBE 動画の形式(type)も様々。Video TagのType属性指定する値は下記Siteを参考に。 Video type parameters - WHATWG Wiki H.264／AVC概要/4.プロファイルとレベル - MPlayer and MEncoder on MacOSX iPad, iPhoneなどiOS向けへの動画は Adobe Media Encoder を使って変換しているけど、 FFmpeg などで変換する場合は下記Siteを参考に。 Technical Note TN2218: Compressing QuickTime Movies for the Web | Safari Developer Library 「 ios dev h.264 」でGoogle先生に聞く   < Related Posts > HTML5(<video>) or Flashを自動で切り替えてくれるJavaScript Library（iPad...

Web上で動画を再生させる方法は swfobject を利用して、 Flash対応 → Flashを埋め込む Flash未対応 → 静的画像 とするのが今までの正攻法。今後はiPad, iPhone(iOS)やSmart Phoneでも再生できるように、HTML5の"video" Tagを使うのが当たり前になってくると思う。 各Browserの差異を吸収して、HTML5のVideo TagとFlashを切り替えてくれるJavaScript Libraryを紹介。   MediaElement.js VideoJS JW Player License GPLv2/MIT LGPLv3 CC3.0 商用利用 - Flashは FlowPlayer を利用しているので、Logoを消したい場合は こちら を参照。 $95～ $89～ 詳しくは Official Site で 説明 Flash PlayerのSourceも公開されているので何でも出来る。基本はこれでいい気がする。 FlowPlayerがJavaScriptで制御できて使いやすい。 Creative Commons Licenseなので注意。iOSの場合だけHTML5を使うみたい。 注意点 「○秒間連続再生できるまで停止する」のようなBuffering機能がない。 3.2.7にはBufferingしている間Loading Animationが表示されないBugがある。（ 詳細 ）   Video tagに設定できる属性は下記Siteを参考に。 HTMLMediaElement Class Reference | Safari Developer Library Sa...

PCとiPad両方に対応したWeb Siteを構築したときのMemo. 共通のCSSのみで完結させたかったけど、どうしても下記理由でPCとMobileを判別する必要が出てきた。 どの端末でも動画を再生させたい どの端末でも曲(BGM)を流したい Gallery（画像一覧）はSwipeで次の写真に移動したい → jQueryç³»Plugin側で対応しているのが多い。 PCで画面を広くした場合だけ、位置を変えたい 実現するために調査した結果の一覧。 Library 言語&License 用途 swfobject JavaScript (MIT) Flash(swf)が使えるか判別して、object tagか静的画像を自動挿入してくれる。 Modernizr JavaScript (MIT & BSD) HTML5/CSS3が使えるか判別。<video>が使えるかの判断に jQuery.Mobile JavaScript (MIT or GPLv2) TapやSwipeなどのEventを取得するのに使える。その場合autoInitializePage=falseにして利用する。 VideoJS JavaScript (LGPLv3) video tag → flash → 静的画像の順に判断して、動画を再生できるようにしてくれる。Flashの場合は FlowPlayer を利用。 こちらの記事 も参考に php-mobile-detext PHP (MIT) Server側で判断したいときに。PHP4で動かないけど、簡単に修正できる。 (WordPress) P...

RPGは作るつもりはないけど、PromotionやFlashでやっていたことをこのFrameworkを使うことで面白いことが出来るかもしれない。 RPG JS: Your online RPG on your browser iPhone, iPad, AndroidなどのMobileで表示できるのは大きいけど、やっぱりIE8で表示できないのも大きい（今の時点で30%）。 [NETMARKETSHARE] Browser market share 2011å¹´5月のブラウザシェア 、3位にFirefox 4 ‐ IE6が2位へ | エンタープライズ | マイコミジャーナル

HTML5が必須なので、仕事で使うことはまだなさそうだけど、大きな可能性は感じる。 PDFをHTML5でレンダリングするプラグイン不要の「pdf.js」をMozillaが発表 - ITmedia ニュース Official Site: https://wiki.mozilla.org/PDF.js Github: https://github.com/andreasgal/pdf.js Demo: http://andreasgal.github.com/pdf.js/ License: BSD   < Related Posts > 【PHP】TCPDF 4.5.xxx＋FPDIで既存PDFの読み込みと編集 【PHP】Webで帳票を作成するのにPDF変換を利用する方法

Blueprint と 52framework は試してみたけど今度はこれを使ってみる予定。 ç±³Twitter、Webアプリケーション開発のためのCSSフレームワーク「Bootstrap」をオープンソースで公開 - SourceForge.JP Magazine : オープンソースの話題満載 Official Site を見ればSampleが豊富なので、何ができるか分かる。 他のCSS Frameworkを使っていれば、特に迷うことはなさそう。 ただ LESS というCSS pre-processorを使っているので、この使い方は覚える必要がありそう。 今までCSSはIndentとCommentで構造化を表現していたけど、この際Bootstrapを導入して統一していこうかと迷う。 難点は私以外Maintenance出来なくなる・・・（今の会社では）。 ちなみに「less css」で検索するとLess Frameworkという別のCSS frameworkがHitする。これもそのうち調査するかも。 Less Framework 4   < Related Posts > HTML5 + CSS3に対応したFramework「52framework」 CSS Framework「YAML」

HTML5をBaseにSiteを構築するようになったので、参考になったSiteのMemo. HTML5・ページ作成の基本 | HTMLリファレンス - WEB DESIGN LAB HTML5 Rocks - Improving the Performance of your HTML5 App （英語） HTML5 Rocks - Best Practices for a Faster Web App with HTML5 （英語）   < Related Posts > Google Tech Talksの講演動画には役に立つ情報がたくさん HTML5とWebSocketについて調査、勉強（関連Link集）

iPhone, iPad, Androidも意識したWeb Site開発をしないといけないので、これは覚えておかないといけない。 スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R] 実機で確認する 横幅は320pxもしくは640pxでデザインする 横向きを想定したデザインにする フォントはヒラギノ角ゴで フォントサイズは12px以上で作成する 1pxのこだわりを捨てる 極力画像を使わずコーディングできるように意識する リンクの領域は44px以上で Webクリップアイコンを準備する ハイライトカラーを指定する < 2011/09/10, 2011/11/23 Modified > 参考になるSiteを追記。 Safari Developer Library: Configuring the Viewport Designing Web Apps for the iPad jQuery Mobile を使えばTapやSwipeのEventが簡単に取得できそう。ちなみに画面を回転させたときのEventはjQuery Mobileを使わなくても次のようにすれば出来る。 $(document).bind('orientationchange', function(){alert('Rotation');});   < Related Posts > Mobile端末向けのJavaScript Library"Sencha Touch"と"jQuery Mobile"

HTML5 + CSS3 + WebSocket + node.jsの最新技術を使ったWebSiteを作ろうとしていたときのMemo. 今までは blueprint というCSS frameworkを使っていた。HTML5とCSS3に対応したFrameworkはないものかと探してみると「 52framework 」( Google Code )がいいみたい。下記記事も参考に。 Best HTML5 And CSS3 Frameworks < 52frameworkの特徴 > HTML5, CSS3に対応 Cross-Browser supporting. IE6でも表示できる仕組みを提供 Design用のIllustrator Fileが含まれているので、これを元にDesignすれば作り易い。 MIT License . (Official Siteには記載がないが Google Code にある) 今後はこれをBaseにしていくつもり。   < Related Posts > HTML5とWebSocketについて調査、勉強（関連Link集）

HTML5やnode.jsに関して調べているときに YouTubeにあるGoogle Tech Talksの動画 に素晴らしい情報がたくさんあることに気付いた。. 英語だけど。 あとでじっくり見るためにMemo. Building a JavaScript-Based Game Engine for the Web   Node.js: JavaScript on the Server   Speed Up Your JavaScript   Google検索しても見つかりづらいので、YouTubeに実装してほしい機能は 音声からTextの抜き出し 動画からTextの抜き出し 近い将来実装されてそう。