http://ydlprog.ddns.net/ydlprog/ 2026-04-28T15:25:17+00:00 http://ydlprog.ddns.net/ydlprog/ http://ydlprog.ddns.net/ydlprog/lib/exe/fetch.php?media=wiki:dokuwiki.svg text/html 2018-03-21T09:34:27+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:apc_%E4%B8%AD%E9%96%93%E3%82%B3%E3%83%BC%E3%83%89%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%A8%E5%A4%89%E6%95%B0%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5&rev=1521624867&do=diff APC(中間コードキャッシュと変数キャッシュ) Ubuntu 14.04 LTS へインストール php 5.5 以降は、APC キャッシュがなくなったので、APC キャッシュ互換モジュールの apcu をインストールします。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:canvas%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9&rev=1521366992&do=diff canvasの使い方 canvasの作成 htmlに<canvas></canvas>を記述し、id、横幅(width)、高さ(height)を指定します。 コンテキストの取得 キャンバスの操作は、コンテキストに対して行ないます。 色の指定方法 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:chapter_1_gulp_%E3%81%A7%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E7%92%B0%E5%A2%83%E3%82%92%E4%BD%9C%E3%82%8B&rev=1521366992&do=diff Chapter 1：gulp でリアルタイムプレビュー環境を作る 1-1：Cygwin とターミナルのインストール Cygwinとターミナルをインストールします。 1-2：node のインストール gulp(ガルプ)を使うためには、Node.js という JavaScript 環境が必要ですので、 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:chapter_2_gulp_%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86&rev=1521366992&do=diff Chapter 2：gulp を使ってみよう 2-1：gulp 用の gulpfile.js の作成 いきなり敷居が高いので、不満が出るまでは誰かが作ったファイル(環境)を使うべし。 ということで、私の環境を置いときます。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:chapter_3_html_%E3%81%A8_css&rev=1521366992&do=diff Chapter 3：html と css text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:chrome_%E3%81%A7_minify_%E3%81%95%E3%82%8C%E3%81%9F%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E8%A6%8B%E3%82%8B%E6%96%B9%E6%B3%95&rev=1521366992&do=diff Chrome で Minify されたソースを見る方法 {} のアイコンをクリックすると、見やすいソースに表示に切り替わります。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:css%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%81%AE%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D&rev=1521366992&do=diff CSSセレクタの優先順位 CSSセレクタは優先順位順位があり点数は 指定方法例点数タグのstyle属性 style=“” 1000点ID #hoge 100点 クラス .hoge 10点 擬似クラス a[href*=“google”] 10点 要素名 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:cutycapt_%E3%81%A7_web_%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3&rev=1521366992&do=diff cutycapt で web ページのキャプチャ cutycapt という x11 用のアプリを使うと簡単に web ページがキャプチャできます。 cutycapt のインストール webページのキャプチャ --url でキャプチャしたいwebページのurlを指定。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:ffmpeg-php_%E5%8B%95%E7%94%BB_%E9%9F%B3%E5%A3%B0%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E8%A7%A3%E6%9E%90%E3%82%84%E5%A4%89%E6%8F%9B&rev=1521366992&do=diff ffmpeg-php(動画,音声データの解析や変換) 14.04 LTS へインストール Ubuntu 14 から ffmpeg 関連が削除されたため、自分でコンパイルしないとインストールできなくなりました。 コンパイルに必要な物をインストール。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:html%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9&rev=1521366992&do=diff htmlの書き方 * 最低限のhtml * スタイルシートの基礎 * canvasの使い方 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:imagick_%E7%94%BB%E5%83%8F%E6%93%8D%E4%BD%9C%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA&rev=1521366992&do=diff imagick(画像操作ライブラリ) Ubuntu 12.04、14.04 LTS へインストール 以下のコマンドを実行すればインストールされます。 XAMPP USB Lite 1.7.7 へインストール 2012/09/07 時点で Windows でハングアップしないで動くバージョンは存在しません。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:ios4%E3%81%AE%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85&rev=1521366992&do=diff iOS4の制限事項 画像サイズ(GIF)2MByteまで画像サイズ(PNG)2MByteまで画像サイズ(TIFF)2MByteまで画像サイズ(JPEG)32MByteまでコンテンツサイズHTML,CSS,JavaScriptは、それぞれ10MBまでcanvas2MByteまでJavaScript text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:iphone%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%AA%E3%82%B9%E3%83%88&rev=1521366992&do=diff iPhoneで使えるフォントリスト JavaScriptでiPhoneで使えるフォントリストを表示します。 iPhoneで見るには、こちらのフォントリストから。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:iphone%E3%81%AEsafari%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6&rev=1521366992&do=diff iPhoneのSafariについて * iOS4の制限事項 * iPhone専用metaとlink * iPhoneで使えるフォントリスト * Tips text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:iphone%E5%B0%82%E7%94%A8meta%E3%81%A8link&rev=1521366992&do=diff iPhone専用metaとlink iPhone専用meta ビューポート width ページの横幅(200～10000 デフォルト:980)height ページの縦幅(223～10000 )initial-scaleページロード直後の表示倍率(minimum-scale～maximum-scale) text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:memcache_%E5%88%86%E6%95%A3%E5%9E%8B%E3%83%A1%E3%83%A2%E3%83%AA%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0&rev=1521366992&do=diff memcache(分散型メモリキャッシュシステム) Ubuntu 12.04、14.04 LTS へインストール 以下のコマンドを実行すればインストールされます。 XAMPP USB Lite 1.7.7 へインストール 以下のファイルをダウンロードし、xampp/php/ext にコピー。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:pear_%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E6%8F%90%E4%BE%9B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9&rev=1521366992&do=diff PEAR(ライブラリ提供サービス) PEARはPHPで書かれたライブラリ、PECLはC言語で書かれたライブラリをインストールするための パッケージ管理ソフト。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:phpmyadmin_%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB&rev=1521366992&do=diff phpMyAdmin のインストール インストール phpMyAdmin は、mysql をブラウザで管理するツールです。 web サーバーは apache2 を選択。 dbconfig-common は、いいえを選択。 phpMyAdmin の設定 mcrypt 拡張のエラー修正方法 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:php_%E6%8B%A1%E5%BC%B5%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB&rev=1521366992&do=diff PHP 拡張モジュール * PEAR(ライブラリ提供サービス) * APC(中間コードキャッシュと変数キャッシュ) * memcache(分散型メモリキャッシュシステム) * imagick(画像操作ライブラリ) * ffmpeg-php(動画,音声データの解析や変換) Ubuntu で実験 * cutycapt で web ページのキャプチャ * wkhtmltox で web ページのキャプチャ text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:tips&rev=1521366992&do=diff Tips 自動的にフォントサイズが変わるのを防ぐ スタイルシートに以下を記述。 フルスクリーンモードではない時にアドレスバーを消す JavaScriptに以下の様に書く(１ドットでもスクロールするとアドレスバーは消える)。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:virtualbox_%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB&rev=1521366992&do=diff VirtualBox のインストール XAMPP Windowsでのテストではうまく動かないモジュールとかもあるので、 Linuxサーバーでテストできれば、より本番に近い環境でテストできます。 VirtualBox は <https://www.virtualbox.org/> からダウンロードします。 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:web%E5%88%B6%E4%BD%9C&rev=1521366992&do=diff WEB制作 汎用的ではなく、依頼された業務をこなすためのWEB制作なので万人向けではありません。 * Chapter 1：gulp でリアルタイムプレビュー環境を作る * Chapter 2：gulp を使ってみよう HTMLとCSS * 目的別タグ * 目的別スタイル Tips * Chrome で Minify されたソースを見る方法 * CSSセレクタの優先順位 text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:wkhtmltox_%E3%81%A7_web_%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3&rev=1521366992&do=diff wkhtmltox で web ページのキャプチャ wkhtmltox は cutycapt 以上に簡単に web ページがキャプチャできます。 wkhtmltox のインストール web ページのキャプチャ text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88&rev=1521366992&do=diff スタイルシート text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E5%9F%BA%E7%A4%8E&rev=1521366992&do=diff スタイルシートの基礎 スタイルシートとは スタイルシートはhtml(文章)と、デザインを分けるために生み出された仕組みです。 スタイルシート(css)が誕生するまでは、文章の中に文字サイズや、色などを記述していました。 text/html 2018-03-21T09:32:04+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E6%A7%8B%E7%AF%89&rev=1521624724&do=diff テストサーバーの構築 webの実験や勉強をする場合、毎回サーバーにアップロードしてては効率が悪いです。 ローカルにサーバーを立ち上げ、テストできれば効率も上がります。 * VirtualBox のインストール text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89_%E3%82%AD%E3%83%BC%E7%94%9F%E6%88%90&rev=1521366992&do=diff パスワード、キー生成 パスワード(英数字 12桁) <html> <pre class='code' id='PassStr'></pre> <button type=“button” onClick='GenerateStr(“PassStr”)'>再生成</button> <script type=“text/javascript”> GenerateStr("PassStr") ; text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E3%83%95%E3%82%A3%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%95%E3%82%A9%E3%83%B32011&rev=1521366992&do=diff フィーチャーフォン2011 携帯ブラウザの注意点(2004年から技術の進歩がない)。 注意点 * docomoはインラインのみ対応で、外部css等は使えない * doCoMoはContent-Typeをxmlにする * 容量は100KByte(HTMLは9KByte)まで text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E6%9C%80%E4%BD%8E%E9%99%90%E3%81%AEhtml&rev=1521366992&do=diff 最低限のhtml DOCTYPEと文字コード、言語指定 文字コードは基本的には「UTF-8」を使います。 DOCTYPEは無難な、「XHTML 1.0 Transitional」を指定します。 言語の指定も行っておきます。 headに何を書くか text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E7%9B%AE%E7%9A%84%E5%88%A5%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB&rev=1521366992&do=diff 目的別スタイル セレクタ 種別 スタイル指定 メモ タグ div { } htmlタグ class=“hoge”.hoge { } 使いまわすもの id=“hoge” #hoge { } ユニークなもの text/html 2018-03-18T09:56:32+00:00 Anonymous (anonymous@undisclosed.example.com) http://ydlprog.ddns.net/ydlprog/doku.php?id=web:%E7%9B%AE%E7%9A%84%E5%88%A5%E3%82%BF%E3%82%B0&rev=1521366992&do=diff 目的別タグ 構造 種別 タグ 見出し <h1>見出し１</h1> <h2>見出し２</h2> <h3>見出し３</h3> <h4>見出し４</h4> <h5>見出し５</h5> <h6>見出し６</h6> 段落