独身無学のぷろぐらみんぐ勉強のーと @famio1986 - Tumblr Blog

HTML5 canvas要素

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

View On WordPress

#HTML5 API #Javascript #canvas

HTML5 video要素

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

View On WordPress

#HTML5 API #Javascript #video

HTML5 audio要素

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

View On WordPress

#HTML5 API #Javascript #audio

HTML5の基本的なマークアップ

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

View On WordPress

HTML5 基礎

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

View On WordPress

#API #DOM #AJAX

書評 : イラスト図解式この一冊で全部わかるサーバーの基本

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

View On WordPress

書評：イラスト図解式この一冊で全部わかるWeb技術の基本

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

View On WordPress

Webシステムの構築と運用

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

View On WordPress

#冗長化 #データベース #ファイアウォール #負荷分散

Webシステムのセキュリティと認証

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

View On WordPress

#セキュリティ #ファイアウォール

Webアプリケーションの基礎

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

View On WordPress

#冗長化 #サーバーの種類 #DBMS #Webアプリケーション #Cloudflare

Webのさまざまなデータ形式

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

View On WordPress

#Feed #DOM #JSON #リッチスニペット

HTTPの基礎

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

View On WordPress

#TCP/IP #SSL #HTTP #GET #POST #HTTP/2 #Cookie #URI

Webとネットワーク

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

View On WordPress

#TCP/IP #DNS #OSI参照モデル #UDP #Web #HTTP

Web技術基礎

Web とは

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

View On WordPress

#REST

WordPressカスタム AMPページタグの無効な使用（重大な問題）に対処

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

View On WordPress

#WordPressカスタム #yStandard #AMP #エラー対処

RSS全文配信せずブロトピ（ブログサークル）反映させるためのカスタム

以前、下記の記事を書きましたが、暫定的な解決案として「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全文配信せずブロトピ反映させる…

View On WordPress

#WordPressカスタム #ブログサークル #Feed

WordPressカスタム・yStandard AMPページ・アナリティクス切り替え

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

View On WordPress

#WordPressカスタム #yStandard #ネットワーク

Trending Blogs

Recently Viewed Blogs

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