独身無学のぷろぐらみんぐ勉強のーと

HTML5 canvas要素 に関してノート。 HTML5 canvas要素 canvas要素を使用すると画像ファイルを用意しておかずともJavascriot経由で図を描くことができる。 長方形の描画 HTML側にはcanvasタグを記述し、必要であればwidthとheightを指定しておく。 Javascriptで該当のcanvasを取得し、getContextメソッドを取得し適当な変数に格納しておく。 短形の色を指定する場合はfillStyleもしくはstrokeStyleを4の前に指定しておく。 strokeRectメソッドでは線画を描写し、fillRectメソッドでは塗りつぶしの図を描写することができる。   実装サンプル： 三角形の描画 短形以外の図形は点と点を繋ぐパス形式で描画していく。 beginPathメソッドで図形を書き始めることを宣言…

HTML5 video要素 に関してノート。 HTML5 video要素 video要素はaudio要素とよく似ていて、属性も同じものが幾つか使用できる。 属性名 値 概要 src ファイルのパス 必須 preload none 事前にロードしないように促す metadata 最初のフレーム、長さなどのメタデータのみを事前にロードするよう促す auto 事前にロードするように促す autoplay なし 自動再生する loop なし 再生をループする controls なし コントローラーを表示 width 数値 動画を表示する幅 height 数値 動画を表示する高さ poster ファイルパス 動画がロードされなかった場合の第かえ画像（サムネイル） type MIMEタイプやコーデック ブラウザがサポートしているかを判断する Javascriptでの制御…

HTML5 audio要素 に関してノート。 HTML5 audio要素 audio要素は、音声ファイルを再生しJavascriptなどでコントロールできるようにするための要素。src属性にファイルのパスを指定し、controlsやautoplayなどの再生制御のための属性を付け加える。 属性名 値 概要 src ファイルのパス 必須 preload none 事前にロードしないように促す metadata 最初のフレーム、長さなどのメタデータのみを事前にロードするよう促す auto 事前にロードするように促す autoplay なし 自動再生する loop なし 再生をループする controls なし コントローラーを表示 type MIMEタイプやコーデック ブラウザがサポートしているかを判断する…

HTML5の基本的なマークアップ に関してノート HTML5の基本的なマークアップ 文書型宣言 HTML5では文頭の文書型宣言を最小限の記述に簡略化させた。 対応したすべてのブラウザはHTMLであればすべて下記の記述で標準レンダリングさせることができる。 文字エンコーディング 旧来のマークアップでは文字エンコーディングの指定にmetaタグのContent-Typeを利用していたが、ブラウザは言語判別にcharset属性しか利用していない。 そのためHTML5ではmetaタグにcharset属性をつけるだけのシンプルな簡略化が採用された。 言語指定 コンテンツが何語で書かれているかをマークアップする際には旧来metaタグが使用されてきたが、HTML5ではhtml要素にlang属性で記述する。 script / style / type…

HTML5 基礎 に関してノート。 HTML5 基礎 W3Cが掲げた理想 10年ほど前、HTML4からXMLを取り入れたXHMLが誕生し、マークアップ作法が大きく変わった。 XHTMLはコンピューターが理解しやすい「マシン・リーダブル」であることを目標に掲げそれまでに比べて厳しいマークアップ作法が課された。 その後、さらに高度化を図ったXHTML1.1がリリースされる。 様々な機能を後付で追加できる「モジュール」という概念が登場し、「SVG」「MathML」「Ruby Annotation」など様々なモジュールが登場した。 しかし当時のブラウザシェアトップを誇っていたInternetExplorerがXHTMLに対応していなかったことと、モジュールの概念が難しく一般の製作者には受け入れられなかった。…

イラスト図解式 この一冊で全部わかるサーバーの基本 を読了しました。 著者：きはしまさひろ 単行本: 192ページ 出版社: SBクリエイティブ (2016/3/29) HTMLや各種プログラミング言語を学ぶ前に、Webやシステムの根本的にささえる基礎技術を学んでおこうと思い購入。 サーバーやネットワークについてのベーシックで大まかな内容が記されていました。 善い点 技術仕様を広く浅く、ベーシックな部分に絞って網羅的に記述されている。 もっと深く学習していこうとすればいくらでも記述内容は複雑化していくだろうけど、あくまで「最初の入門書」としてはちょうどいい量と温度感で書かれているのがとても読みやすかった。 「IPアドレス」「サーバー構成」など日常的に使っているベーシックな技術の仕組みを知ることは非常に有意義だと感じた。…

イラスト図解式 この一冊で全部わかるWeb技術の基本 を読了しました。 著者：小林 恭平 / 坂本 陽 監修：佐々木 拓郎 単行本: 192ページ 出版社: SBクリエイティブ (2017/3/16) 同じシリーズで出版されていた「イラスト図解式 この一冊で全部わかるサーバーの基本」を読了後、そちらが読みやすかったのでもう少し基礎的な知識を深めようとシリーズ作品である本作に手を伸ばしました。 が、読み始めてから気づきましたが同じシリーズでも著者の方が違うのですね…失敗。 善い点 Web全般におけるベーシックな知識をあくまで浅く広く紹介している内容です。 それぞれについて細かく言及するのではなく大まかに抑えておくべき基礎知識を網羅的に紹介しています。 Webサイトやサービス、アプリケーションなどを提供する側の語り口で、技術の基本的な概要、一般的な運用方法、セキュリティやツールの紹介、など。…

Webシステムの構築と運用 に関してノート。 Webシステムの構築と運用 提供するサービスはなにか Webシステムの構築をスル際にはサービスの内容を検討し、最終的に必要なシステム機能を洗いだします。 サービスの内容： 何を提供するか、どんな人を対象としたものか、何を使ってアクセスするものか、どんなときに使うものか、など内容を具体化させます。 必要な機能・デザイン： サービス内容から必要になる機能を検討します。データの格納が必要ならデータベース、外部との連携が必要ならAPIの実装、など。 また、利用者やアクセス端末によって最適なデザインや表示方法を精査します。 システム基盤に求められる機能 必要な機能が具体化すればおのずとシステムに必要な機能も決まってきます。データベースにはDBサーバーが必要、個人情報を扱うならセキュリティの向上など。 利用言語 / ソフトウェアはなにか…

Webシステムのセキュリティと認証 に関してノート。 Webシステムのセキュリティと認証 Webシステム譲歩機密情報を守るためのセキュリティ対策は、Webシステム運営にあたっての必須条件のひとつである。 「機密性」「完全性」「可用性」の３要素を維持することが「情報セキュリティ」において重要視されるポイントである。 機密性：アクセスを認められたものだけが情報にアクセスできる状態を保持すること 完全性：情報が破壊、改ざん、消去されていない状態を確保すること 可用性：必要なときにいつでもアクセスできる状態を確保すること これらを維持することができず何らかの損失が発生する可能性を「リスク」とよび、リスクを現実化させる要因を「脅威」、脅威に対する弱みを「脆弱性」とよびます。これはサーバー運用においても同じです。（参照：サーバーのセキュリティ）…

Webアプリケーションの基礎 に関してノート。 Webアプリケーションの基礎 ネットワークを介してWebブラウザ上で動作するアプリケーションをWebアプリケーションとよぶ。 3階構造 Webアプリケーションは3層構造（3層アーキテクチャ）と呼ばれる3階層構造になっています。 プレゼンテーション層：ブラウザとWebサーバーのやりとり、ユーザーの入力操作を受け付ける。（クライアントサイドスクリプトと同義） アプリケーション層：WebサーバーとAP（アプリ）サーバーとのやりとり、命令処理の実行を行う。（サーバーサイドスクリプトと同義） データ層：APサーバーとDB（データベース）サーバーのやりとり、APサーバーが必要なデータを抽出、更新、保管します。 3層に分割されていることからそれぞれの階層で行う処理が負荷分散されます。 そのため、とくに大きな規模のシステムではこの方式がとられます。…

Webのさまざまなデータ形式 に関してノート。 Webのさまざまなデータ形式 HTML HTML文章はタグに囲まれた文章によって構成されている。 タグとは「何を示すか」を表すもので「開始タグ」と「終了タグ」からなる。「開始タグ・文章・終了タグ」のひとかたまりを「要素」とよぶ。 要素には必要に応じて特性を表す「属性」をついかすることができる。 HTMLは年々機能が追加されており2016年11月には最新バージョンであるHTML 5.1が勧告されている。 画像 Webで使用される画像データ形式には代表的なものに「JPEG」「GIF」「PNG」がある。 JPEGは「非可逆圧縮」されている（一部のデータを削除してサイズを減らしている）ため、原則的に元の画像には戻せない。 たいして、GIFやPNGは「可逆圧縮」のためいつでも元の状態に戻すことが可能。 JPEG…

HTTPの基礎 に関してノート。 HTTPの基礎 HTTPはWebサイトに表示されるHTMLなどのテキストや画像などのコンテンツをやりとりする際に使われるプロトコル（ルール）。 クライアントであるWebブラウザが要求を出すと、それをWebサーバーが受取り、要求に応じたデータを返すことでWebサイトの閲覧を可能にしている。 このとき利用されるのが「HTTPメッセージ」とよばれるデータ形式。ブラウザもサーバーも「HTTPメッセージ」を利用することでWebの要求と応答を実現している。 HTTPリクエスト HTTPメッセージには大きく分けて２つの種類があり、ブラウザがサーバーに要求を出すときに使用されるのが「HTTPリクエスト」。 「リクエスト行」「メッセージヘッダー」「メッセージボディ」の３セクションから構成され、ブラウザが何を要求しているかが記述される。…

Webとネットワーク に関してノート。 Webとネットワーク 世界中のWebを繋いでいるのがコンピューターネットワークと呼ばれる仕組みである。 クライアントとサーバー ネットワーク上で情報やサービスを提供するコンピューターを「サーバー」とよぶ。それに対して、サーバから情報を受取利用する役割を持つコンピューターを「クライアント」とよぶ。 具体的にはWebサイトを提供しているのがサーバー、それを閲覧するブラウザなどが「クライアント」になります。 Webサイトを提供するためのサーバーを「Webサーバー」と呼ぶ。 プロトコル ネットワークに接続された機器同士が通信する際のルールを「プロトコル」とよぶ。 たとえばWebページをやりとりするためのプロトコルは「HTTP」である。 TCP/IP TCP/IPとはインターネット上の様々なサービスを実現するための「プロトコル」の集合体。…

Web とは

Web技術基礎 に関してノート。 Web技術基礎 文章や画像をインターネットで公開するためのシステムを「Web」と呼ぶ。 正式名称は「World wide web」とよび、「WWW」と称される。 Web上の文章は「ハイパーテキスト」と呼ばれる言語で構成され、更に別のページを参照する「ハイパーリンク」などを埋め込むことができる。 Webへアクセスする際は一般的にWebブラウザを利用します。 インターネットの起源 「インターネット」はアメリカ国防総省の計画局・ARPAによって開発されたネットワーク技術「ARPANET」が元になったものである。 通信方式（プロトコル）の見直しを経て徐々に使用網が拡大し、世界に知られるようになったころ「インターネット」と呼ばれるようになった。 それとは別に、Webはもともと欧州原子核研究機構（CERN）で開発された技術。…

AMPページ導入後、Google サーチコンソールから「AMP タグの無効な使用（重大な問題） 」というエラーを報告するメールを受け取ったので対処方法を備忘録。 今回は使用しているテーマ「ystandard」のカスタムを利用して対処しました。 AMP タグの無効な使用（重大な問題） エラーの内容としては、「AMPページで使えないタグが使用されているよ」という感じ。 今回、自分が報告を受けたページでは、oEmbed機能を利用したいさに出力されるiframeタグ内の「security」「marginheight」「marginwidth」の３つの属性がAMPページには流用できないらしい。 該当部分のソースを確認すると下記のような感じ。 「security=“restricted”」「marginwidth=“0” marginheight=“0”」が不要ということらしい。…

以前、下記の記事を書きましたが、暫定的な解決案として「RSSの全文配信」を選択しました。 が、やはり「全文配信したくないな〜…」と思い直したので、 RSS全文配信せず にブロトピ反映させるためのカスタムを施策しました。 https://w9y.me/famio/%E3%83%96%E3%83%AD%E3%83%88%E3%83%94%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%BF%E3%82%B0-%E3%81%8C%E6%AD%A3%E5%B8%B8%E3%81%AB%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%AA%E3%81%84/ RSS全文配信せず ブロトピ反映させる…

「 yStandard 」というテーマを使い始めました。 シンプルだし軽くて気に入ってるのですが、リリースされたばかりということもあってか、個人的に少し物足りない点も散見されるので自分でカスタムを加えてみます。今回は、 yStandard AMPページ・アナリティクス切り替え するためのカスタマイズを備忘録。 yStandard AMPページ・アナリティクス切り替え をしたい yStandardの仕様だとテーマ設定で入力したアナリティクス・トラッキングコードが、標準ページでもAMPページでも同じものが使いまわされるようになっています。 個人の好き嫌いだとは思いますが、自分はAMPページのトラフィックは非AMPページのそれと分けて計測したかったんですね。なので、それぞれ別のトラッキングコードが挿入されるようにカスタムしました。…