camuro

リモートインターン6日目 ｜ Webの基本 – 組み込みコンテンツ系

引き続きHTMLの学習です。

今日はHTML要素のリファレンスの主に組み込みコンテンツ系に目を通していきました。 # 気になったタグ

3.の記事の文頭にあった”<object>タグは、文書に外部リソースを埋め込む際に使用します。<embed>がプラグインを必要とするデータを埋め込むのに対して、<object>には外部リソース全般を指定することができます。”の文章が一番しっくりきた。 おまけで時間軸上でJSのアニメ作れるhypeを教えてもらった。adobe edgeの簡易版…とのことなんですが、そもそもadobe edge触ったことなかった。flashだとユーザーエージェント依存があるのでjsに切り替えるとき用にツールの扱い慣らしておきたい。キリングタイムになりそうだったので、また後日。 - video要素 poster属性 : "ユーザーエージェントが利用可能なビデオ・データがないときに表示できる画像ファイルのアドレスを与えます。" - track要素 : "ウェブ制作者がメディア要素に対して明示的な同期テキスト・トラックを指定できるようにします。" テキスト・トラック・データについて、下記の記事が参考になりました。 デモの動画がR2D2…。 - WebVTT ファイルフォーマット

リモートインターン3〜5日目 ｜ Webの基本 - HTML

HTMLの内容に入って三日目ですが、まだHTML5.jpでHTML要素のリファレンスに目を通すところで止まってる感じです。 長い。一気に読める感じではないので気長にやっていきます。 # 読んでいく中で気になったタグ

  • optgroup要素
  • accesskey属性
  • dfn（重要語句の初出個所などは、dfn要素（definition）としてマーク付け。自動索引生成などにも威力を発揮）
  • abbr（HTMLなどの略語は、abbr要素（abbreviation）でマーク付けし、title属性でフルスペルを添えると初心者にも親切）
  • pre
  • code
  • cite（人、引用には使わない）
  • divの解釈（他に適切な要素がある場合は乱用しない。わかってはいたけど、今までsectionで区切る感じでない時に迷うとdivを使ってしまっていた）
  • a（現在のページのリンクにブランクリンクでa href="#"をつかってたけど、<a></a>だけでよい、hrefがない場合、他のコンテンツ属性は使わない（無意識にやっていたことが説明されてスッキリ））
  • フレージング・コンテンツはドキュメントのテキストのこと

HTMLの説明を読むで気になった文言

  • 目が不自由な人で音声合成ソフトでページを「読み上げ」ている場合でも、“見出し部分は少しトーンの高い声でゆっくり読む”といった設定にすることで、文章を理解しやすくなる。
  • 文責のない文書は怪文書、日付のない文書は役立たず
  • ウェブというメディアの特質 飛ばし読みをして概要をつかもうとする傾向が強い
  • 利用者の持っている予備知識 組織の論理でコンテンツを分類すると、利用者は迷子になりやすい
  • 大量の文書から情報を自動抽出する dfn要素をうまく使うと、索引が自動生成できる class="abstract"などのルールで抄録を生成する
  • HPR 3.01の標準設定では、見出しにさしかかるとチャイムが鳴り、少しゆっくり読み上げられて、セクションの移行が意識できる。

リモートインターン2日目 ｜ Sublime Text 2 & PC性能を知る

今回はSublime Text 2のPackageインストールとショートカット、PC性能について学習。

Sublime Text 2 | Package install

チュートリアルのSublime Text 2 の設定・カスタマイズなどを参照して進めるなど。

あまりにもインストールが簡単でうっかり目的ではないPackageを入れてしまったので、メモ。 Packageをのアンインストールは、Package Control から Remove Package でOK。

アプリの全画面表示の切り替えショートカットと似ているので⌘F関連のショートカットをタイポしまくりで開いてしまった検索窓のしまい方がわからない。

ショートカットは実際コーディングしながらさらっていく。 ざっと触った感じでST2で慣れたら鬼速で書けそう。

PC性能を知る

自分のMacのシステム情報と照らし合わせながら読むなど。 MacBook Air 2012 mid使用しています。 CPU : Intel Core i7 / メモリ:DDR3 4G×2 / HDD:シリアルATAから確認してSSD 256GB

他、Keynote インストールして触ったり。 学生の頃からppt一辺倒だったので、これも使いながら慣れてくしかなさげ。

次回からはWEBの基本をやっていきます。 実務で触ってない部分の見落としがかなりある筈。

2012/11/06追記

windows 7を入れてるPCにもsublime text2をインストールしてみたのでpackage installでmacに入れたのと同じpackageを入れてみた。 css combでsortできないエラーが出たのでメモ。

Ctrl + Shift + C でsortさせると以下のエラーを吐く。

[sourcecode language="plain"]Sorter Error: attempt to sort non-existent file[/sourcecode]

windowsのpluginのバグらしい。https://github.com/miripiruni/CSScomb/issues/115 大人しくmacで作業する。

リモートインターン1日目

FJORD, LLCさんでデザイナー枠でリモートインターンさせていただくことになりました。本日が初日です。 今回のインターンの最終目標は、デザインテロです。 こちらの資料を参照しながらぽちぽち進めています。

普段、日中は子ども達を保育園に預けながら自宅でデザインやコーディングの仕事をしているので、 インターンの作業ができるのは夜子どもを寝かしつけてからになります。 本当は毎日びっちりやりたいところだけど、 それでは息が切れてしまいそうなので稼働は週三日の予定です。 稼働しない日は、まぁ家のことやったり仕事関係の調べ物したり本読んだり寝倒したりする予定…。

前置きが長くなりましたが、

今回やったこと

エディタは既にSublime Text 2をインストールしていたので、それを使用する予定。 でも真っさらな状態なので、Package等は次回入れる予定。 というわけで、

次回やること

  • Sublime TextにPackageを入れる
  • keynoteのインストール
  • PC性能を知る

このへんかな…。

インターン内容の記事の書き方、maztomoさんのブログ参考にさせていただきました！ こんな感じで、今後お届けしたいと思います。

Railsアプリにデザインを適用する方法　Asset Pipeline

少し前にハマってしまった事、忘れないうちに書いておく。

前回の記事で

hogehoge/app/assets/以下にimage, javascript, stylesheetがあって hogehoge/app/views/layouts/application.html.erbにassets内のjsやstyleが圧縮された状態でリンクされてる

と書いた内容について、p4dで作成したアプリでcssを変更してデザインを変えてみる、というのを試してみた。 しかし、cssを書き換えるだけでは変更が適用できず…。

Asset Pipeline（hogehoge/app/assets/）内のapplication.cssをcompileしないと反映されないらしい。 下記の方法で反映できた。

  • Asset Pipeline内のcss/scssを適当に変更する。
  • hogehoge/app/assets/application.cssをapplication.css.erbにリネームする。
  • ターミナルで
bundle exec rake assets:precompile

でcompile完了。

追記： 一度コンパイルするとpublic/assetsにコンパイルしたファイルが作成され、Railsがそのファイルを自動的に読み込むらしい。 （@shu_0155さんが教えてくださいました。多謝！） public/assets削除したらapp/assetsをコンパイルしなくてもcssの変更が反映できた！