カテゴリー別アーカイブ: study

新しい道具? 紙じゃなきゃ? 「電子絵本」肯定派vs懐疑派 産経新聞 2月1日(金)

紙ではなく、iPad(アイパッド)などのタブレット端末に映したデジタル画像と音で楽しむ電子絵本に注目が集まっている。紙の絵本では表現できない楽しみ方があるというが、「絵本は紙でなければ」という声も根強い。

自由研究:リキッドレイアウトの画像をアニメーションで整列(姪の結婚式)

jt
姪の結婚式の写真を材料にフォトギャラリー作成しました。
画面幅対応のjQueryのanimateでスムーズに整列し、個別写真はlightBoxで拡大します。
PC、タブレット、スマホ等の異なる画面の大きさに対応して、写真の横並び枚数が変わります。
なお。式場は白金八方園で、二人ともホンダの新卒同期です。お幸せに!

Twenty Twelve のフロントページテンプレートについて

Twenty Twelve で固定ページをフロントページにする

2/22勉強会の議事録です。
ワードプレスのテーマ・Twenty Twelve は、デフォルトではブログがフロントページ(トップページ)として表示されていますよね。
今回は固定ページをフロントページとして表示させる手順を説明します。

  1. 取り敢えず固定ページを作ってみる。
  2.    ダッシュボード→固定ページ→新規追加→記事を書く。

  3. 固定ページをフロントページにする。
  4.    ダッシュボード→設定→表示設定→フロントページの表示で固定ページを選択する。

固定ページをメニューに表示させる

  1. ダッシュボード→外観→ウィジェット
  2. 利用できるウィジェットの中から、固定ページを右側のメインサイドバー(又はフロントページウィジェットエリア等、表示させたいエリア)へドラッグ&ドロップする。
  3. ▼を開くと固定ページの名称や、固定ページの表示の並び順を変更出来ます。

ウインドウ幅に合わせて画像サイズを変化させる方法

制作中のバンドのサイト。
http://thebbboogie.com

画面右上に、にょきっ~と出てるギター画像。
横幅の狭いスマホやPCで見るとギターが画面左上のロゴにかぶってしまいます。
ギターのサイズが、そこそこあるからインパクトがあるので小さくしたくありません。
横幅がせまくなった時だけロゴにかぶらないよう、小さくしたいのです。

media queryでやろうと思いましたが、別の方法(CSS)でも出来るみたいなので,そっちで
やってみました。わりと簡単ですよ。

HTML

CSS

参考サイト
http://allabout.co.jp/gm/gc/400630/

2013-2-8勉強会

本日の勉強会は18時20分から。参加者5名。
内容は「モバイルファーストの実例として、clubringoのデザインを作ってみる。」、「audioタグについての解説」、「フォールバックについて」、「clubringoのコンテンツについて」でした。 続きを読む

html5 audio

html5 audioトライしてみました。クロームとFireFoxは大丈夫ですがIEがダメです。

ちなみにクロームとFireFox、それぞれ用に拡張子の違う音源を用意する必要があります。

IE用のjavascriptがあるようなのでトライしましたが、上手く出来ないので、戻しました。

これを今度の金曜のライブ授業でお願いします!!

「どのブラウザでも視聴できる裏技」

ちなみに僕が参考にしたサイト

http://www.html5-memo.com/audio/player001/

http://coliss.com/articles/build-websites/operation/javascript/js-audio-js.html

http://kolber.github.com/audiojs/

興味のある人は見てね。

The B.B.Boogieのサイトを仮でアップしました。トップページの一番下に

「視聴」があります。

http://nobu-69.com/study/new_bb/index.html

 

音楽編集についての質問

マイスペースにバンドの曲をアップしようと思います。各曲、全部ではなく、1曲につきワンコーラスで30秒~1分位に編集したいのですが、こういうのって何で編集するか知ってますか?Flash?

音楽やってるのに、こういう事全然しりません。

よろしくお願いします。

 

 

2013-2-1勉強会

yukoさんから、電子書籍の説明(第2回)

しょうちゃん
自作したjQueryなどの絵本を自サイトで公開するのは、電子書籍ではないのか?

真中のぶ
それだとお金が発生しないよね。

先生
広義の「電子書籍」ではあるけど、現時点の狭義の「電子書籍/電子出版」は『マネタイズ可能であること』が要件としてあると思う。
メジャー感のある場所(AmazonやAppleやGoogle)で「出版」されることで与信されるのが大きい。個人のサイトで「ここからは有料です。振り込んでね」と言われるのとは違う。
整理すると、以下の観点がポイントか?
メディアとしての「リアル書籍」と「電子書籍」の長所・短所、ビジネスとしての話、そこへの関わり方の立ち位置の話を、混乱しないように注意しよう。

論点 リアル書籍 電子書籍
メディアとして プレイヤー(再生機)・コンテンツ(内容)・メモ(書き込める)が一体。一覧で見易い。流し読みし易い。愛着を持ち易い。 プレイヤー・コンテンツ・メモが分離。検索がし易い。場所を取らない。
ビジネスとして 出版業界の役割分担による蓄積されたKnow how。再販制度。与信機能。 現在のWebの様に情報発信・マネタイズが容易になることへの期待。リリースまでが早い。発行部数や在庫のリスクがない。
関わり方として 著者、編集者、出版社、出版取次、書店、読者… 現在の「Webデザイナー」の様に「電子書籍作成代行」も商売の一つになる。「電子書籍の挿絵画家」もアリかも。

先生
音楽コンテンツで考えればわかるが、メディアによってコンテンツの価値は変わらない。
ついつい、電子書籍ならではのコンテンツを考えてしまうが、そこは選択肢でしかない、という状況になるだろう。

しょうちゃん
シニアには本の方が良い。お金も持っているし。

clubringoサイトについて

  • セキュリティの観点から、初期参加が難しそうなメンバーのユーザー登録を一旦削除。
  • サイトの当初の目的は「サイボウズLive」でやっていた事のオープン化。こちらで出来る事は、できるだけこちらで行って欲しい。
  • 具体的には「覚え書き作成」、質問と回答はこちらで。クローズトな話題はサイボウズLiveで。
  • 読む人の信頼感と共感性を考えて、発言者はニックネームでも良いが顔出しにはしたい。顔出ししたくない人の表現をどうするかは工夫を考える。
  • 投稿内のユーザーの呼称はニックネームで。
  • 新規投稿、カテゴリ、タグの追加は自由。なんらかのルールを加えた方がいいかもしれないが、それらの提案や議論は、運営カテゴリで行う。
  • 読む人の信頼感と共感性を考えて、発言者はニックネームでも良いが顔出しにはしたい。顔出ししたくない人の表現をどうするかは工夫を考える。
  • wpテーマは、当座、Twenty Twelveで良いが、テンプレートに手を加え易い様にTwenty Twelveのクローンを作って、それを使うことにする。
  • ユーザー権限で、管理者権限が不要な人については権限を変更。

スクロールバーカスタマイズ

パソコンのデフォルトのスクロールバーってダサいですよね。変な青いやつ。
コンテンツ内にoverflow-y:scroll;などとしてスクロールバーを表示させた時
あの青いのが出てくるとデザインが台無しです~。

jQでいいのがないか探してみたら
http://kachibito.net/web-design/tiny-scrollbar.html
が良さそうなんですが、使い方がいまいちわかりません。
本サイトのダウンロードボタン押しても????だし。
http://baijs.nl/tinyscrollbar/

今度の新年会の授業でお願いしまーす。 続きを読む

第16回(12/21)勉強会報告

2012年12月21日(金)の活動報告です。

  1. CSS3で回転するオブジェクトの作成
  2. 「オリジナルWebサービス・コンテンツ」プロジェクトのアイデア出し

http://shoji.main.jp/2012_1221/log_20121221.html
私のサーバーにアップしました、上記URLからご覧ください。
こんなCSS3回転オブジェクトを研究しました。
rotate

Responsive Web Designとは?

12月15日(土)の活動報告・改訂版です。

はじめに

mq1ファイルをダウンロード

mq2ファイルをダウンロード

ファイルをダウンロード出来ましたら、mq1とmq2それぞれをブラウザで開いて下さい。
開きましたら、それぞれの画面の幅を小さくしてみて下さい。
いかがでしょうか?
mq2の方はある大きさまで狭まると、レイアウトが変わります。

今回の授業では、mq1を元に、
画面の大きさによってレイアウトが変わるmq2を作成しました。

それでは、どうやって作るのか?を説明してまいります。
元ファイルであるmq1のソースをコピーしてテキストエディタで開き、動作を確認してみて下さい。

手を加えるのは<head>内の<style></style>の中とhtmlの一部です。
続きを読む