Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

28ページ目

a-blog cmsを英語対応にしてみる


a-blog cmsの管理ページを英語化してみました。
外国のCMSをつかっているような気分になりますねww
やり方はthemeフォルダの中のsystemの中身のファイルをすべて英語に翻訳していくという地道な方法です。
この英語化したパッケージはa-blog cms 開発ブログにあげる予定ですが、英語の翻訳に間違いはあると思うので温かい目で使ってみてください。



divとsectionとarticleの区別がいまいちつかない

HTML5では、実に多くのタグが使えますね。これらタグはただ単にパーツとして使えるばかりではなく、機械に自分のサイトを読んでもらう時に有効です。
なので、divしかつかわないのは、機械に自分のサイトを伝えるボキャブラリーがないことと同義だということです。
そういう自分も宿題でHTMLのテンプレートを作ったが、div divしてるね。といわれたので悔しいので今日はHTML5のタグについて調べる日とします。

article

タグは、独立したコンテンツを示すための要素です。
articleには、ニュースサイトの記事、ブログや掲示板の投稿など、再利用・再配布可能なコンテンツを入れます。

section

セクションとは章や節や項のように、見出しとそれに関する内容というように階層構造(※アウトライン)になる範囲を定義する領域になります

さて、それぞれの要素の意味も解説しましたし、そろそろ本題に入っていきましょう。
これらの要素をどのように区別していけばよいのでしょう。

divとそれ以外の要素の見分け方

HTML5のマークアップ(1) article、section、divの使い分けによると、
divと、article/sectionの区別は簡単なようです。
ある装飾を実現するためのブロック要素にはdivを使えということだそう。
意味のある塊に対してはsection/articleを使いましょう

sectionとarticleの見分け方

どのサイトを調べても、

それだけで、独立して成り立つ内容ならarticle要素を使え

としか書いていません。困りましたね。
しかし、やっとわかりやすい記事を見つけました。
こちらです。
もう悩まない!HTML5の「section要素」と「article要素」の違いについて
ここには、

「RSSフィードで読み込んで、一つの記事として成り立つかどうか。」

で判断すればわかりやすいと書かれています。なるほどgunosyの記事一覧をイメージすればいいんですかね。

他にもHTML5は学ぶことたくさん

caption要素なんて知ってますか??

captionはテーブルのキャプションを示す要素で、tableの中に1つ目の小要素として記述することが出来ます
<table>
<caption>Atlas.jsのプロパティ一覧</caption>
<tr>
    <th>isSmartPhone</th>
    <th>basicConstructor</th>
</tr>

</table>

上のような記述ができて、このテーブルがなんであるかを説明するための要素だそうです。
いや〜HTML5の勉強は果てがないですね。頑張ります。


WCAN2014 Summerに参加して


WCAN 2014 Summerに参加しました。200人もの方々で、会場がいっぱいに埋め尽くされました。
今回は以下の方々に講演をしていただきました。



今回は名村さんの発表した内容について、まとめて最後に感想を書きたいと思います。
他の方々の発表も近日にまとめて記事にします。

だれがどうみてもそうとしか受け取れない文書

サービシンク 名村晋治さん

ディレクターにどんなスキルが必要か?

最も重要な仕事はジャッジ(決定)すること。
ジャッジするためにはマークアップの知識やサーバの知識、いろんな知識が必要になる。ジャッジを下せるようにハンズオンの説明会にいったりする。
そのジャッジを周りの周りのみんなに「連絡」をしていかなければならない。

文書術が必要

ジャッジを周りのみんなに「連絡」する際に必要となるのが文書術。
出来上がった物が自分の意図と違うと作り直しになる
無駄とも思える連絡のやりとりが続き、時間が過ぎていく
だめな文章は「主語」が抜けている場合がおおい。
コミュニケーションは聞き手でなく、100%話し手に問題がある。

だめな文章を書くと

補足説明が必要になる
相手が聞き直してくる
あとで見た人が「意味不明」

きちんとした文章を書くのはめんどくさいよね

書くためのツールを用意する
(インデント形式、wiki記法が使えるツール)
「見出し」「段落」「リスト」の表示と整理

マークダウン記法

h1の見出し * 見出し
h2の見出し **見出し
リスト表示 - リスト表示

メールを書く際

いつも、定型文を書くのがめんどくさい。

TextExpanderをつかって、そういった定型文を登録しておこう



ドキュメント記述のこつ

  • まずはかならず「要件」を書く。なぜ、それを行うのか、作るのかを共有
  • 断定的ないいいかたをする「です、ます調」は使わない事実だけをいう
  • 同じ単語を繰り返さない
  • 一年後、同じ文章をみてわかるかを意識する

感想

私自身、頼まれたページのマークアップが終わって、上司に連絡をするときに「修正しました」と連絡し、「どのページのどこを??」とおこられることがあります。主語URLが抜けていると、相手には伝わらないことがおおいです。「どこのことを言っているかわかるだろう」と鷹をくくって連絡を怠るとよけいに時間を割いてしまうので、最初から相手につたわる文章で連絡することがだいじだなと今回のセミナーで感じました。
また、ツールなどをつかってあらかじめ、よく連絡する内容や定型文などを登録しておき、それに対するショートカットを用意しておけば連絡する時も便利だなと思いました。


ずるいボタンを実装してみた。

ずるいボタン

今回は赤塚 妙子さんが紹介されているずるいボタンを作成しようとして、定義されているMixinの意味が分からず、ハマって一日無駄にしたのでそれを記事にかいて見ようと思います。
ちなみに、下にそのソースコードを記載します。

@import "compass";
@mixin ts-000($op : .4){
  text-shadow: 1px -1px rgba(0, 0, 0, $op);
}
@mixin gradient-top-lighten($color:#666, $lighten:10%){
  background-color: $color;
  @include filter-gradient(lighten($color, $lighten), $color, vertical);
  @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) {
  border: 1px solid rgba(0, 0, 0, $border);
  @include box-shadow(rgba(0, 0, 0, $shadow) -1px 1px 0, rgba(255, 255, 255, $highlight) -1px 1px 0 inset);
}
@mixin button($color: #48B1F2, $font-size: 16px, $text-color: white) {
  cursor:pointer;
  display: inline-block;
  background-origin: border-box;
  position: relative;
  font-weight: bold;
  @include ts-000(.1);
  @include gradient-top-lighten($color, 5%);
  @include border-radius(4px);
  @include emboss-box($border: .1, $shadow: .1, $highlight: .2);
  color: rgba($text-color, .9);
  text-align: center;
  font-size: $font-size;
  padding: 0 ($font-size * 2);
  height: $font-size * 3;
  line-height: $font-size * 3;
  i {
    font-size: 130%;
    margin-right: 5px;
    color: rgba($text-color, .5);
  }
  &:hover {
    @include gradient-top-lighten(lighten($color, 5%), 5%);
    text-decoration: none;
    color: $text-color;
    i {
      color: $text-color;
    }
  }
  &:active {
    @include gradient-top-lighten($color, 5%);
    top: 1px;
  }
}

.my-btn{
  @include button($color:#ef662f);
}

Mixinとは

MixinとはいろんなCSSのプロパティをセットにしたもので、クラスを作る時などにincludeして使い回すことが出来ます。

定義されたMixinの解説

embos-box??

もともとembosとは以下のような意味があるそうです。

〔模様・図案を〕浮き出しにする

boxは中にbox-shadowの記述があるのでおそらくbox-shadowの短縮系であることは間違いないでしょう。
borderbox-shadowを併用することで上の図のように、浮かび上がるような線をつくることが出来るみたいです。
逆にこれを利用することで凹んだ線をつくることもできます。
詳しくは以下を参考にしてください
ズルいデザインテクニック2013 + セミフラット version

ts-000?

ts-000はtext-shadowの記述があるのでtext-shadowの短縮系でつかっているのでしょう。
ハイフン以下の000はrgbの000であると見て間違いなさそうです。
つまり、ts-000は黒のテキストシャドウを透明度を指定して設定できるMixinのようですね。

gradient-top-lighten??

このMixinは僕が解説するまでもありませんが、ある色を指定したら、要素の上部にかけて徐々に明るくなるMixinのようですね。明るさの割合も%指定出来るみたいです。便利ですね.

残りは、buttonというMixinをつくってそれらを@includeしているみたいですね。
みなさんもぜひ便利なMixinを使って友人に自慢しましょう


a-blog cms 2.1のメディアユニットを使ってみよう



みなさん。a-blog cmsでメディア管理が出来るようになったのをご存知ですか??
これは非常に便利です。
では今回はメディア管理の使い方について解説していきたいと思います。


「a-blog cms 2.1のメディアユニットを使ってみよう」の続きを読む

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド