Bugle Diary: html

ラベル html の投稿を表示しています。すべての投稿を表示

2017/02/13

[html][seo]meta keywordsとSEOの関係について

これもまたコンテンツを作る時に悩むのが、meta keywordsの設定について。

SEO対策上入れておいた方がいいのかよくわからなず設定していたのですが、今回、少し時間をとって調べてみたら、どうやら

meta keywordsの書き方とSEOで不要な理由

を参考にするとむしろ入れない方がいいみたいです。

googleの中の人も言っているみたいです。

2017/02/11

[xml][seo]sitemap.xmlの雛形(テンプレート)

サイトマップを作成、送信する
を読みながらsitemap.xmlの雛形(テンプレート)を下にまとめてみました。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>http://www.example.com/foo.html</loc> 
  </url>
</urlset>

2017/02/10

[xml]xmlのContent-Typeは？

sitemap.xmlを作るのにContent-Typeの調査をすることになりました。

xmlのContent-Typeはapplication/xmlか、それともtext/xml？

によると、ずばり、application/xmlが推奨みたいです。

2017/02/07

[html]schema.orgのtype WebSiteについて

前回、schema.orgのtypeのリンク先を紹介しましたが、例えば、価格comなんかをみるとトップには下のようにコードが組まれていたりする。

<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "http://kakaku.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "http://kakaku.com/search_results/{search_term_string}/?cid=shop_gs001",
     "query-input": "required name=search_term_string"
   }
}
</script>

で、これは日本語訳にはなく、本系には存在するtypeのようでした。

potentialActionキーは読んで字のごとくサイト訪問者が行うであろうアクションを記述したものであり、で、上は、検索アクションで、検索先は、targetで指定されているっぽく、query-inputに指定されている値が検索キーワードでtargetの{}の部分に置換されるようだ。

Potential Actions

2017/02/03

[html]BreadcrumbListのテンプレート

前回紹介したschema.orgのtypeでBreadcrumbListのわかりやすいテンプレートがあったので、一部、修正して、掲載する。

<nav>
<ul itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ul>
</nav>

ちなみに、Rettyのサイトをみたらcontentが0からだったんだけど、型がIntegerなのでいいのかなと納得させた。

2017/01/31

[html]schema.orgのtypeについて

schema.orgのtypeが全部掲載されているページって無いのかなーっと思ってぐぐったら、ありました。

schema.org 日本語訳

しかも、日本語で！

ありがたやー。

2016/11/09

[html][iOS]textareaの改行って2文字分??

どうやらiOSの場合、下のようにソースを組むと改行するときに2カウントされるみたい。

<textarea maxlength="10"></textarea>

でどうやら
textarea要素の文字数の扱いについて
によると、webkitの仕様のようで、つまりandroidでも発生するみたいです。

めんどくせー。

2016/10/14

[html][css]Google HTML/CSS Style Guide

Google公式のHTMLとCSSのコーディング規約
Google HTML/CSS Style Guide
めっちゃ参考になる！！

2016/06/19

[css][materialdesign][html5]dialogについて

material design liteでdialogを使いたくて調査していたら、なんと、dialogタグを推奨か、自前で実装してほしいと書いてあった。

しかも、dialogタグはchromeしかサポートしておらずwww

mobile safariでもサポートしてくれないかなー。

2016/05/20

[CSS][Material Design Lite]material-design-galleryプロジェクト作成

Material Design Liteを使ったCSSとHTMLにはまっていて、それをまとめた場所がほしいなと思い、githubに
material-design-gallery
という形で作ってみました。

不定期ですが、作ったコーディングソースをアップしていこうかなと。

2016/05/19

[html5]srcsetって

wordpressを使って記事を書いていたら、ソースコードの中に

<img srcset="">

という記述があって、何だろうって思って調べたら、どうやら、windowのピクセルベースで画像を切り替えることができるみたい。

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
で確認すると、今のところ、対応しているブラウザは、chromeのみらしいんだけど、他のブラウザsafariとか対応してくれないかなーっと思ったり。

2016/05/08

[JavaScript]画像の圧縮を行う

input type のfileから取得した画像データを圧縮するにはどうすればいいのだろうか？

$('input[type="file"]').on('change',function (e){
  var $currentTarget = $(e.currentTarget);
  var path = $currentTarget.val();
  path = path.toLowerCase();

  var file = e.currentTarget.files[0];
  var size = file.size;
  var type = file.type;
  var filename = file.name;
    
  var dataUrl = URL.createObjectURL(file);

  var image = new Image();
  image.onload = function(){
    var width = image.width;
    var height = image.height;
    var ratio = 0.5;

    var canvasWidth = Math.floor(width * ratio);
    var canvasHeight = Math.floor(height * ratio);
    var $canvas = $('<canvas></canvas>');
    var canvas = $canvas[0];
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    var ctx = canvas.getContext('2d');
    ctx.drawImage( image , 0, 0, width, height, 0, 0, canvasWidth, canvasHeight);
    var base64 = canvas.toDataURL(type);
  };
  image.src = dataUrl;
});

元の大きさの画像を半分にする処理なのですが、0.5のところを調整すれば、拡大したりすることも可能。

この処理では、実際に、html内に、inputだけあればよく、canvasタグとimgタグを用意しなくても処理を実行できちゃうところが便利ですね。

参考
クライアント側でcanvasを使って画像をリサイズする

2016/05/02

[HTML][iOS]imgのretina対応

Objective-Cを使ったRetina対応の方法はわかるが、webの方はどうすればいいのだろうか？

Webサイト＆WebアプリのRetina対応方法まとめ
で確認すると、基本的には、同じで、例えば、50*50の画像を表示したい場合、100*100の画像を用意して、

<img src="./img/hoge.png" width="50" height="50">

という形で、widthとheight属性をそれぞれ設定すればおｋ

2016/04/10

[iOS][HTML]ホーム画面にWebページをブックマークしたときの名前を変更

iOSでmobile safariを使っているときにブクマしたときに名前を変更するにはどうすればいいのだろうか？
WebページをiPhoneのホーム画面にブックマークしたときのアイコンとタイトルを変更する方法
によると、

<meta name="apple-mobile-web-app-title" content="ほげほげ" />

で変更できる模様。

2016/03/27

[iOS][html5]クレジットカード読み取り

amazonのようにwebからクレジットカードの番号を自動で読み取ってくれないかなーっと調べていたら、iOS8以降のsafariで、そのような機能があるようです。
iOS8 (Safari8) で "クレジットカードを読み取る" に対応する
 [iOS8]クレジットカード読み取りに対応したフォームの作り方
実際に、https環境下で、下のようにコーディングを組みました。

<input id="cardNumber" type="text" size="20" maxlength="20" name="hoge">

有効年月の読み取りはできなかったんだよなー。

2016/03/10

[html5]autocomplete属性について

今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ
というエントリーを読んで、inputタグにautocomplete属性があることを初めて知ったwww

<input type="email" name="email" autocomplete="email">

2016/03/07

[iOS][html]webを全画面モードで表示

どうやらsafariで開いたページで「ホームに追加」をした後、下のmetaタグが入っていた場合、ナビゲーションバーとツールバーが表示されない、フルスクリーンモードで表示されるようです。

<meta name="apple-mobile-web-app-capable" content="yes">

参考
【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。

2016/01/26

[JavaScript][html 5][css 3]IEの8 9 10がサポート終了

やっとか。

MicrosoftがブラウザInternet Explorer 8・9・10のサポートを2016年1月12日に打ち切ると発表しました。この日以降はセキュリティアップデートを含めたすべてのアップデートが行われないようになります。
via:ウェブ開発者・デザイナーに朗報、ついに来週IE8・9・10が公式サポート終了

ってことで、現状、各OSがどうなっている調べた。

windows Vista SP2
IE9

windows 7 SP1
IE11

windows 8.1
IE11 edge

windows 7は、edgeにアップグレードができないみたい。
謎すぎるんだけど。

ただ、こうしてサポートが切れるので、新しいタグとかjsの処理とか入れることができるのでいいですね。

2015/12/23

[html]anonymous属性について

bootstrapのサイトを見ているときに以下のような記述がありました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

このanonymous属性ってなんだろうなーっと思ってぐぐったら、以下のようなことらしい。

ちなみにscriptタグに付与しているcrossorigin属性は「anonymous」キーワードが指定された場合、
リクエストにはcookieやクライアントサイドのSSL証明書、HTTP認証などのユーザ認証情報は利用されなくなるらしい。

もし、コードが改変され整合性が確認できない場合は
via:Subresource Integrityについて調べた

確かにhttpsリクエストの場合、証明書の確認とか必要だもんなー。

それをチェックしなくていいのは便利だが、同時にやはりintegrity属性も付与したほうがいいかもしれない。

2015/12/22

[html]integrity属性について