はてなブックマークでVue.jsのYouTube動画が人気を集めていました。 b.hatena.ne.jp 動画を見てみたら、「たにぐち まことのプログラミング学習応援チャンネル」というコンテンツでした。 https://www.youtube.com/user/tomostajp/playlists www.youtube.com たにぐちまことさんと言えば、HTMLやJavaScriptの本を書かれている方ですね。 twitter.com www.amazon.co.jp 本屋で、たにぐちさんの著書をよく見かけます。 これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん 作者: たにぐちまこと 出版社/メーカー: マイナビ出版 発売日: 2017/03/27 メディア: 単行本（ソフトカバー） この商品を含むブログを見る さて、動画チャンネルを見たら、Vu

Visual Studio CodeでPHPのファイルを開いたら、HTMLが圧縮（minify）されてて非常に読みづらい状態になってました。→自分がやったことだけどｗ ちゃんとインデントされた状態に戻したいので、HTMLをフォーマットするプラグインを探してみました。 Visual Studio Codeのプラグインの検索欄で「HTML format」と入力したら、いろいろ候補が列挙されて、その中で良さ気なのを適当に入れてみました。 Format HTML in PHP 名前が「Format HTML in PHP」というそのものズバリのプラグインがありました。 marketplace.visualstudio.com とりあえず、これをインストールしてみます。 インストールした後に、PHPファイルを開いた画面で右クリックすると、コンテキストメニューの画面が出てきます。 そこに「Format

JavaScriptでマインドマップのようなグラフを描画するライブラリーを探してみました。 有向グラフとは？ グラフ理論 - Wikibooks グラフ理論におけるグラフ （Graph）とは、頂点(node)と辺(edge)により構成された図形のことである。 グラフは主に、有向グラフ （directed graph）と無向グラフ （undirected graph）の2つに分類される。 有向グラフとは、頂点と向きを持つ辺（矢印）により構成されたグラフであり、無向グラフとは、頂点と辺により構成されたグラフである。 統計的テキスト解析(6)～語のネットワーク分析～ マインドマップとは？ マインドマップ - Wikipedia マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。 描き方は、表現したい

Webページの表示を高速化する手段として「AMP」という仕組みがあります。 Accelerated Mobile Pages (AMP) とは？ Accelerated Mobile Pages - Wikipedia Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。 また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。 AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。 構成 AMPは、大きく分けて、AMP HTML、AMP JSそしてAMP Cacheの3つの部分からなる。 AMP HTMLは、ウェブページを記述するためのマークアップ

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ＝早い：Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ＝遅い：アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理するCMS（コンテンツ管理システム）の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」（Static Site Generator）と呼ばれています。 WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。 jsstudy.hatenablog.com StaticGen 今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか？いまいちよく分かりませんでした。 とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあった

AIを活用した便利なツールがありました。 Webページのデザインを手描きで下書きして、それをHTMLコードに自動で変換してくれる「Sketch 2 Code」というツールです。 Microsoftが、AzureのAIサービスの活用例として公開しているみたいです。 https://sketch2code.azurewebsites.net/ （参考）以下のページでSketch2Codeが紹介されていました。 note.mu togetter.com GitHubでSketch2Codeのコードが公開されています。 github.com こんなかんじで動作するみたいです。 "Sketch2Code: Turn whiteboard sketches to working code": https://t.co/9P2vuoskxR pic.twitter.com/LcqESSTw9e — sa

中国ではWebブラウザーで動作するHTML5ゲームが流行しているそうです。 note.mu 2014年には北京でEgret Technologyという会社が創業し、HTML5に特化したゲームエンジンEgret Engineを開発します。Egret TechnologyはEgret Engineに対応したゲーム開発ツールを立て続けにローンチします。 技術者の方々の中にはCocos 2d-jsを聞いたことはあっても、Egret Engineを知らないという方もいると思います。理由は簡単でEgret Engineのツールには中国語版しかないものが多く、マニュアルも一部しか英語化されていないためです。日本語の技術情報にいたっては皆無です。 今では一通りゲームを開発できるチュートリアル程度のマニュアルが英語でも整備されていますので、興味のある方は試してみてください。 Egret Developer

ドットインストールのHTML入門を学んで、気になったところなどをメモ。 http://dotinstall.com/lessons/basic_html_v3 jsstudy.hatenablog.com #01 HTMLとはなにか？ (02:56) #02 必要なツールを用意しよう (02:55) #03 タグと属性を理解しよう (02:20) #04 はじめてのHTML (02:07) #05 meta､linkタグを使ってみよう (02:44) #06 styleタグを使ってみよう (02:33) #07 id､class､style属性を使ってみよう (02:28) #08 セクションについて理解しよう (02:35) #09 アウトラインを意識してみよう (02:43) #10 h1-h6タグで見出しを付けよう (02:28) #11 p､hr､pre､blockquote､di

今日は、ドットインストールのHTML入門を学んでみます。 講座の時間 #01 HTMLとはなにか？ (02:56) #02 必要なツールを用意しよう (02:55) #03 タグと属性を理解しよう (02:20) #04 はじめてのHTML (02:07) #05 meta､linkタグを使ってみよう (02:44) #06 styleタグを使ってみよう (02:33) #07 id､class､style属性を使ってみよう (02:28) #08 セクションについて理解しよう (02:35) #09 アウトラインを意識してみよう (02:43) #10 h1-h6タグで見出しを付けよう (02:28) #11 p､hr､pre､blockquote､divを使おう (02:52) #12 ol､ul､li､dl､dt､ddでリストを作ろう (02:48) #13 strong､br､sp

JavaScript学習で、「DOM」という用語がよく出てきます。 DOMについてまとめておきます。（メモ） DOMとは？ APIとは？ DOMツリーとは？ DOMツリーのノード DOMの操作 DOMを操作するためのライブラリー JavaScriptでDOM操作 jQueryでDOM操作 MVCフレームワークでDOM操作 Virtual DOM（仮想DOM）の登場 DOMリファレンス まとめ DOMとは？ DOM - Google 検索 DOM（ドム）は、「Document Object Model」の略です。 JavaScriptを使って、ブラウザーのDOMを操作すると、HTMLを書き換えることができます。 ↑こっちのドムではありませんｗ Document Object Model - Wikipedia Document Object Model (DOM) は、HTML文書やXML文

004 HTMLの基礎知識 - YouTube （2分53秒） 今日は、HTMLの用語を復習します。 教科書は、『確かな力が身につくJavaScript「超」入門』です。 jsstudy.hatenablog.com HTMLタグの書式と各部の名称 (p.10) HTMLは、「HyperText Markup Language」の略です。 →無理矢理日本語にしたら、「超-文章-刻印-言語」というような意味になり、何だか強そうな武器みたいですね！（笑） Webページを作るときに、テキストや画像などの「コンテンツ」に対して、HTMLの「タグ」という記号を使って、印を付けていきます。 （例） <a href="index.html">ホーム</a> というHTMLソースコードの要素があったとき、 各部に名前（呼び方、用語）が付けられています。 タグは、「<」（小なり記号）と「>」（大なり記号）で