Horic Design

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

27ページ目

a-blog cms 管理画面でのタブの増やし方を考えてみた

ブログの管理画面のhtmlはthemes->system->admin->blog->edit.htmlにあります。
これを直接いじってしまってはバージョンアップの時によろしくないので、
自分のテーマフォルダの中にadmin->blog->edit.htmlのようにディレクトリの階層をつくりましょう。そこに、systemのなかのedit.htmlのコードをまずはぺたっと貼付けます。



次にacms-tabsと検索して、50行目あたりにある、ul要素を見つけてください。
ここにli要素を追加してください。
このときに、なかのa要素のhref属性のあたいを決めてください。ここの値は他のタブと被らないようにしましょう。


つぎに、acms-tabs-panelと検索してください。だいたい最後のほうにあります。
ここに上のようにacms-tabs-panelというクラスのついた要素を追加して、中に読み込ませたいファイルへのinclude文をかいていきます。
この時に追加した要素のidは、先ほどa要素のhref属性につけた値と一致させてください。
これで、タブの切り替えが行えます。
管理画面で、用途に応じてタブが切り替えられたら便利ですよね。
皆さんもやってみてはどうでしょうか??


chromeのシークレットモード


chromeのシークレッドモードをご存知でしょうか?
シークレットモードでサイトを閲覧してもCookieが保存されないので、未ログインユーザとして
サイトを閲覧することが出来ます。
通常モードでは、Cookieが保存されるので、ログインしている状態と未ログインの状態が同時に確認できますね。
こんなかんじです。


こんなかんじで、同じブラウザでログイン時と未ログイン時の両方を確認できます
cmd+↑+Nで簡単にシークレットモードでウィンドウを開けるので皆さんもやってみては??


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が抜けていると、相手には伝わらないことがおおいです。「どこのことを言っているかわかるだろう」と鷹をくくって連絡を怠るとよけいに時間を割いてしまうので、最初から相手につたわる文章で連絡することがだいじだなと今回のセミナーで感じました。
また、ツールなどをつかってあらかじめ、よく連絡する内容や定型文などを登録しておき、それに対するショートカットを用意しておけば連絡する時も便利だなと思いました。


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド