埋め込みコードで文字にサウンド!SoundCiteを使ってみた

お久しぶりでございます。
本日は、簡単に音声を埋め込めるwebサービス、SoundCiteを試してみました。
本当はお気に入りの曲で試したいところですが、著作権問題とか色々と面倒なのでiphoneのボイスメモで即席音源を作成、こんな感じで文字に音を埋め込めます。
即席バラッド
(クリックで再生、再度クリックで停止)

SoundCiteの使い方は本当に簡単です。
まずはじめに埋め込みたいサウンドファイルをFTPの任意のフォルダにUPします。
そこでファイルのURLを調べてコピーします。
SoundCiteへ行きまして、Create clipsの

  • 1.に先ほど控えたファイルのURLをペーストし、Lordボタンをクリック。
  • 2.でスタート時間とエンド時間を設定してリンクテキストに適当な文句を入れます(後からでも変えられます)。create clipボタンをクリック。これで出来上がったEmbed codeをhtmlにペーストします。ワードプレスだったら、投稿の編集画面にペーストするだけです。
  • 最後に3.にあるコードをコピーしてhtmlファイル(ワードプレスだったらheader.phpファイル)のheadタグの中にペーストします。soundcite-02

文章だけだと斜め読みしてしまって内容も忘れてしまいがちですけど、音声で聴くとけっこう印象に残ったりすることありますよね。
大事なことなので2度言います!って時などに使ってみても良さそうですね。ぜひお試しください(^^)

参考にさせていただいたサイト
「埋め込みコード」でココまで可能!欲しかったあの機能を搭載できる無料サービス8選!
また使えそうなものがあれば試してみたいと思います。

skrollrを使ってパララックスのシングルページサイトを作ってみました

skrollrでパララックスしよう!

更新していなかった間、な〜んにもしていなかった訳ではなく(^^;A 最近よく見るパララックスのシングルページサイトを作ってみました。
シングルページということで単調にならない様、ちょっとしたギミックを加えたかったので、前回の記事でやった簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使いました。
skrollrの使い方についてはこちらの記事をご参照下さい。

こちらが今回作成した↓↓↓
パララックスでポートフォリオサイト
です。

あるフォトグラファーのポートフォリオサイト、という設定です。(ご注意!PCでご覧下さい ><) パララックスは、画面いっぱいに画像を配置して見せるサイトにはぴったりだと思います。 サイトを作るにあたり用意したもの

  • skrollrlightboxのJqueryプラグイン
  • スライドショー用とサムネイル用に大きさの違う画像2種
  • icomoonで必要なアイコンフォントセットを作り、ダウンロード。(icomoonの使い方についてはこちらをご参照下さい。私も記事書いておりますので宜しくです。)

top画面は、以前りんごの勉強会にてcss3のアニメーションプロパティを使ってスクリーンセーバーを作った時と同じで要領で、画像を動かしています。作り方はこちらの記事を参考にしてみて下さい。

css3でスクリーンセーバー

bxsliderなどのJqueryを使うのもよいかもです。

さらにスクロールしていくと、スクロール量に応じてそれぞれのセクションが現れては消えるようになっています。イメージは紙芝居ですかね。
各セクションにskrollrのdata属性を付けて動かしています。

ページ内リンクをJqueryで制御する

“skrollrを使ってパララックスのシングルページサイトを作ってみました” の続きを読む

パララックスが簡単に実装出来る!skrollrの使い方

お久しぶりでございます。
年初に今年は”アウトプット宣言”しておきながら、長らく更新STOPしてしまいました。
というのも、記事を書こうとするといつもこう、ヤツにPCを占拠されてしまう有様でどうにもこうにも…
というのはただのいい訳です。もう少し更新頻度上げてく様頑張らねば(^^;

さて、今日はパララックス(視差効果)が簡単に実装出来る、skrollrの使い方をやってみたいと思います。

デモを作ってみましたので、こちらをご覧下さい。

まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね!

<script src="js/skrollr.min.js"></script>
  <script>
      var s = skrollr.init();
  </script>

デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは…

  1. data-○○=”ここに普通にcssを書けばよい”
  2. 色はrgb(a)かhsl(a)で指定する。
  3. 単位を揃える。%とかpxとかを混ぜて使わない。
  4. ベンダプレフィックスは必要なし。
  5. skrollrにはmodeが二つあって、[absolute mode] とは、スクロール量で変化させるモード。
  6. [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。

“パララックスが簡単に実装出来る!skrollrの使い方” の続きを読む

i pad air を買ったので早速お絵描きしてみたが…

明けましておめでとうございます!

前回更新から随分間が開いてしまいましたが、昨年はinputの年(身に付いたかどうかはさておき^^;A)、
今年はoutputの年にする!ことに決めましたので、
気持ちも新たに、楽しみながら更新して行こうと思います(^^)/

さて、昨年末に i pad air を買いました。
これを買って一番やってみたかったのがお絵描きです。
指先だけで凄い作品を作っている方々を見て、うわ〜もぅ絶対やってみたい!って、すぐにいくつかアプリを入れて挑戦してみました。

しかし…。これがもう、難しいの何の!
イメージではもっとサクサク簡単に描けるものだと思っていたのですが、いや〜甘かった(~~;
指先ではどこがペン先にあたるのかわらないので、スタイラスペンも併用してみました。

●使用したスタイラスペン:プリンストンテクノロジー
スマートフォン&タブレットPC用タッチペンnano

もともと絵描き用ではないので当然ですが、指先よりはペン先っぽいのでマシ、な程度です。
筆圧機能も無いので結構ペン先を押し付けないと、感知されたりされなかったり、ペン使用時に画面に手が触れるとそこに描画されちゃうので、書道のように気を使い、手が触れてはやり直しの繰り返し…で、これじゃあ全く筆が進まない(^^;A

そんなすったもんだの末に出来た落書き達です。

使ってみたアプリ
●Adobe Ideas(無料)
レイヤーがたくさん作れて便利
ベクター描画で適当に描いてもキレイな線が描ける、イラレの様な感じです。
色パレットやツール関係は流石はAdobe、これで無料とは凄い!ぜひ試してみて下さい。
“i pad air を買ったので早速お絵描きしてみたが…” の続きを読む

サイトリニューアルのお知らせ

前回の投稿から、かなり間が空いてしまいました(^^;A
今日はサイトリニューアルのお知らせです。

ここで書いてきたlessonの記事の内容が、仲間と運営しているサイト倶楽部りんごででの投稿記事の内容と被るため、一部の記事をりんごへ移行する予定です。

それに合わせてオリジナルテーマ作りにも挑戦します!
今はワイヤーフレームを作成中。。

又、オリジナルテーマをワードプレスに組み込むまでを記事にしてUPする予定ですので、りんご共々宜しくお願い致します!

ワードプレスとツイッターを連携させる

大変お久しぶりになってしまいました(^^;。
今日はワードプレスとツイッターを連携させてみよう、の巻です。

目次
1.WP to Twitterをインストールする
2.Twitter側の設定をする
3.Twitterからキーを取得する
4.ワードプレス側の設定をする

なぜワードプレスとツイッターを連携させるのか?
以前の記事、ワードプレスにいいね!ボタンを設定してみようでも触れましたが、
ツイッターと連携させるメリットを挙げてみますと、
“ワードプレスとツイッターを連携させる” の続きを読む

ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する

本日は最近良く見かける、ページをスクロールしてもソーシャルボタンがそれに合わせてついて来てくれる、
share barというプラグインを装備してみようと思います。
固定型と比べますと、ソーシャルメディアからのアクセス流入数が10%改善されたという報告もあるそうですよ。

目次
1.Sharebarをインストールする
2.Sharebarに「はてなブックマーク」ボタンを追加する
3.Sharebarのカスタマイズ
4.Sharebarとワードプレス関数 get_excerpt の干渉?によるバグの消し方

1.Sharebarをインストールする

ダッシュボードからプラグイン>新規追加で検索フォームにSharebarと入れて検索します。
最初の方に出てきますので、インストールし有効化します。
“ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する” の続きを読む

写真からアイコン画像を作る

この間のブログで触れました、アイコンの重要性。

自分が何者であるかを知ってもらうには、やはり写真を使うのが一番!なのですが..
自分の写真をさらすのには抵抗がある、という方も多いと思うのです。私もそんな一人。

そこで、フォトショップとイラストレーターを使って、
写真からスタンプ風のイラストを作ってみようと思います。
こちらのサイトからフリー画像を拝借致しました。使用ソフトはCS3です。

1.フォトショップで写真加工

写真をフォトショップで開いたら、レイヤーの複製をしておきます。
Pic0
複製したレイヤーを、彩度を-100にして白黒写真にします。
Pic1
ここでハッキリ線を出したい部分等ありましたら
焼き込みツールでなぞって濃度を濃くしておくと良いと思います。

次にレベル補正で、白黒の濃淡をハッキリさせます。
Pic2
これを、web&デバイス用に保存します。JPEGでもPNGでもGIFでも何でもOKでしょう。
“写真からアイコン画像を作る” の続きを読む

アイコンの重要性とデザイン

最近クラブのメンバーからお借りした、
「デザインセンスを身につける/ウジトモコ著」
という本を読みました。

デザインについての内容としては、
☆黄金比
☆三分割法
等、デザイン入門書にあるような基本的なものがサラッと書かれてはいますが
この本を読む事で “デザインセンスを身につけられる” のか?? どうかはさておき^^;
本書の中で一番考えさせられたのが
アイコンの重要性についてです。

一億総表現社会の到来といわれるネット時代、
ツイッターやフェイスブックのアイコン(プロフィール写真)ひとつで
自分が何者であるかを視覚化出来る。だからこそ、デザインセンスを身に付け
なりたい自分をデザインしてこの小さなアイコンの中に表現しましょう、と。

例えばこのアイコン、面倒だからとデフォルトのままにしておけば、
どんなに面白い情報を発信していてもスパムにみえて読んでもらえない、とか
猫や風景のアイコンでは、あなたがどんな人であるかわからない→スルーされやすい、等々。

なるほど、たかがアイコンではありますが、直感的に自分の好きか嫌いかでスルーしたり、
逆にどんな人だろうと興味を持ったりしてるかも。

SNSの中では名刺の様なものですものね。
今一度、真面目にアイコン作成してみようかな?

kindle paperwhiteを買っちゃいました

長く退屈な通勤電車内と、寝る前の読書用にkindle paperwhiteを買いました。
ネットも出来るkindle fireも安いし悩みましたが、
目的が読書なので、なるべく軽くシンプルなものがいいかなと。
本のダウンロード等は家にいる時にやればいいので3Gも必要無し。
ということで、一番お安い7980円のにしました。

発売から長いことamazonでは入荷待ち状態だったのですが、
最近やっと在庫ありになったので、amazonから購入しました。

kindle
内蔵の壁紙がどれもシックで素敵です。

★感想

電子ペーパーですが、本当に紙の本を読んでいるのと変わりなく、大変読みやすいです。
ライトの調節も出来、部屋の電気を消しても読みやすい。
タッチパネルのページ送り・戻しもストレス無く、すぐに慣れます。
それに内蔵辞書が良い!途中でわからない単語などが出て来ても、その場で調べられて便利です。
0円の洋書も沢山ありますし、語学学習にも充分使えるのではないでしょうか。
本の検索等は貧弱、との意見も有りますが、基本的にPCから探しますのでこれは問題無しです。
後は、今後のkindle本の品揃えに期待したい所です。
“kindle paperwhiteを買っちゃいました” の続きを読む

ワードプレスに外部ファイルを読み込ませる

明けましておめでとうございます!

一年の計は元旦にあり!今年はもっと更新頻度を上げて行く様、頑張ります☆

さて、本日はワードプレスに外部ファイルを読み込ませる方法についてです。
ワードプレスで外部ファイルを読み込ませるのには、ワードプレス用のphp関数である、wp_enqueue_script を使います。
今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルをこのブログの本文に対して指定してみようという試みです。

1.縦書きにするためのファイル、『竹取』をダウンロード

『竹取』から、taketori_js.zipをダウンロードします。これを解凍しますと、中に taketori.js と taketori.css というファイルが入っています。

2.外部ファイルをセッティングする

次に、ご自分のFTPへアクセスします。
私の場合は現在子テーマを使っていますので、そのフォルダの中へ1.でダウンロードした taketori.js と taketori.css を入れます。そうでない方はご自分で使用しているテーマのフォルダの中にこの二つのファイルを入れて下さい。

3.自分用の設定を書くためのjsファイルを作る

二つのファイルを入れたテーマのフォルダの中に、新たに自分用の設定を書くためのjsファイルを作ります。名前は何でも良いです。拡張子は.js です。
(ちなみに子テーマを使用している方は、親テーマのheader.phpファイルを丸ごとコピーして、これを子header.phpファイルとしてテーマのフォルダの中に入れておくと良いです。設定はこちらに記述していきます。間違えても安心ですね。)
“ワードプレスに外部ファイルを読み込ませる” の続きを読む

インターネットラジオ Jango

jango

自分好みの楽曲ばかりをかけてくれるアメリカのインターネットラジオ、Pandoraは
残念ながら日本からは使えないので、何か似たようなパーソナライズ・ラジオはないものかと
探して行き着いたのがJangoです。
このラジオ、自分専用のステーションを作る事が出来るんです。

jango

自分の好きなアーティストを、自分の作ったステーションのリストにプラスしていくことで
登録したアーティストはもちろん、同じ傾向のアーティストの曲をかけてくれるんです。
例えば、Led Zeppelin Radio ならクラシックロックな選曲だったり、
Sonny Clark Radio ならジャズ、等々。
いくつでも作れるので、ジャンルごとにステーションを分けて作っておいても良いですね!
歌詞やアーティスト情報もクリックひとつで呼び出せますし、なにより新しい発見もあり、手持ちのCDをかけているよりだんぜん楽しいんです!
是非お試しあれ。