2012/02/09 21:23


【ぼやき】
こないだ、外国人の方にブログの使い方を教えるというなんとも無謀な場面に遭遇しました。
英語なんて、学生時代に貧乏旅行した時以来ほぼ使ってないので、説明は基本日本語という・・・情けない。
ただ、片言の日本語は理解してもらえる人だったし、かなり理解力がある方でしかも、かなりざっくりとした通訳の方もいたので、なんとかなりましたが・・・
というわけで、この年になって改めて語学力の必要性を感じている塩原です。

かなり強引な前フリですが、今日は以前IDEA*IDEAで田口さんが紹介していた英語でjqueryを学べるサイトをこちらでもシェアします。

30 Days to Learn jQuery

これに登録すると、1日1通jqueryのビデオレッスンがメールで届くというサービスです。
決して、英語の勉強という訳ではありません。
jqueryの勉強を英語でできるというだけです。

試してみましたが、初回の内容は(jquery的に)簡単だったということもあり、なんとなく言ってることがわかるかな?という感じでした。

実際に英語の勉強になるかというと、分かりませんが、スピードラーニング的に英語に馴染めるんじゃないかと。

普段からjqueryを触っている人であれば、英語と画面で理解はできると思いますので、興味がある方は、ためしてみてください。

2012/02/05 0:49

情報共有としてエントリーします。

WEB制作者にとってIEは天敵十分考慮しなければいけないものなのです。
ボクも気にはしながら作っているつもりだったんですが、思わぬ落とし穴があったので、ご報告します。

【症状】


WIN XP とIE8の組み合わせ
WIN VISTAとIE8の組み合わせ
の時にページを表示するとクラッシュする。

【原因】


jquery1.6.2を使用している。
bodyにbackgroundで画像を指定している。
※複数あると思いますが、今回遭遇した場合のはなしです。

jquery jQuery BUG TRACKER

ってか、bodyにbackgroundで画像って、普通誰でもやるじゃん(激怒)

対処方法としては、jqueryのバージョンを上げるか下げるか・・・

上記の場合でもかならずクラッシュするわけではないのですが、メモリを食うような表現を多用しているとかなりの確率で発生します。
調べてみると、IE8は結構不具合が多いようですね。
とくにwin7以外のOSとの相性はあまりよくないようで、クラッシュなどの報告が多数あがっています。

毎日.jp IE8で毎日jpを閲覧した際の不具合について

制作側として、できるだけ多くの環境できちんと表示させないといけないのは当たり前なのですが、
ブラウザとOSの組み合わせになってしまうと、検証しきれないのも現実であったりします。線引きが大変難しいところです。

都会の制作会社さんでは、事前に対応ブラウザを指定している案件もあると聞きます。強制的な線引きがどこまで必要か分かりませんが、少し「今風」な表現をするようなサイトでは、ある程度の切り捨ても必要なのかなと思います。
というのは、製作者の都合なのかもしれませんけど・・・

いや、それよりも某社さんがきちんとバグを直してくれればそれでいいんです。そうなんです。ってか、複数のバージョンが存在するようにしていることに問題があると思うけど。。

それにしてもこのバグの存在を見つけてくれた方に本当に感謝です。はい。

2012/01/25 22:17

最近公私ともに「Gmailに別のメールを同期させる方法教えて」っていうことを大変よく聞かれるので備忘録としてまとめてみます。設定自体は簡単なのですが、最初に一回しかやらないことなので、とっさに聞かれてもすんなり答えられないのです。

前提としてgoogleのアカウント(gmailも)と同期したいpopメールを受信できる環境と設定情報(ID、パスワード、メールサーバなど)をご用意ください。

それではいってみましょう。

Gmailを開いて、右上のオプションボタンから「メール設定」を選択して、「アカウントとインポート」を開きます。
中央付近に「POP3 を使用したメッセージの確認」という項目の「自分の POP3 メール アカウントを追加」をクリックします。



小さなウインドウが表示されるので、指示に従って情報を入力していきます。

まず、設定したいメールアドレスを入力します。


次に、そのメールのパスワードなどの設定情報を入力します。この時、入力情報に間違いがあると、エラーが返ってきます。

また、今まで通り、メールソフトを使って受信もしたい場合は、「受信したメッセージのコピーをサーバーに残す」にチェックを入れておいてください。
※サーバーにメールが溜まってしまいますので、どこかでクリアする(通常メールソフト側で受信する)ことをしないと、メールサーバーがパンクして受信できなくなる場合があります。



次の画面に進めれば、これで受信はできるようになりました。とりあえず読めればいいよ。という方はここでおしまいです。どうせなら、送信もしたいという方はもう少しがんばりましょう。


画面のまま、次にステップへ行ってください。

特に、意図がなければ、Gmai経由で送信するにチェックして次へ進んでください。



googleから、設定したメール宛にメールが届きます。(今まで通り、メールソフトで受信されます。)
そのメールに認証用のURLが記載されていますので、それをクリックするか、認証コードを次の画面で入力して、設定完了です。


赤く囲った部分に、設定したいメールアドレスが表示されていれば、OKです。


これで、自分のpopメールをGmailで送受信できるようになりました。実際に運用する際は、ラベルでうまく管理するといいかと思います。また、この設定をしておけば、スマホでGmailを受信するようにしていれば、そのままpopメールも送受信できるようになっているはずです。

これで24時間365日仕事に束縛される環境が完成という・・・

ご利用は計画的にどうぞ。

2012/01/12 1:03

1月10日の話なので、ちょっと波に乗り遅れてますが、とても大切な話題だと思うのでエントリーします。

googleの検索システムが大幅に変更になりました(日本版はまだですけど)



今回の変更点は
“Personal Results” “Profiles in Search” “People and Page”の3つのようです。
詳しくは、googleのニュースリリースやループス・コミュニケーションズさんの記事をご覧いただけばと思います。

>Search plus Your World [google]
>Googleが、Google+連携でソーシャル検索を実現。ここ数年で最も大きな検索の進化と発表[ループス・コミュニケーションズ]

特に大きく変わった部分として、google+の中で共有された情報を検索結果に反映してくれるということです。
今までの検索アルゴリズムも残りますが、ソーシャル上でのやりとり(友達のおすすめなど)により価値がでるということです。
googleにしろ、facebookにしろ、かなりプライベートな情報を預けているので、今回のように簡単にgoogle+の情報にアクセスできるようになるというのは、プライバシー的にどうなのって問題もあります。
(あまり関係ないけど、携帯(android)で撮った画像とか動画が自動でG+にアップされちゃうのにすごく違和感があります。もちろん、デフォルトでは非公開になっているのでいいですけど)

ただ、検索結果が個人用に最適化されるってのは、とても素晴らしいことだと思います。
これでいわゆるSEO的なことも減るんじゃないかと(極論ですけど)
個人的には(一生活者として)SEOに限らず、声高に「うちのサービスはすごいんだぜ」的なwebサイトはどうも好きになれません。そんなサイトが検索結果の上位に鎮座するのもいかがなものかと思う時もあります。
そうゆう、一方的なものより、友達だったり、興味がある人から薦められた方が信頼できると思いまし、今現在の検索ですと、検索結果の中から本当に必要な情報を精査しないといけません。そういった煩わしさが少しでも軽減するのであれば、それは大歓迎です。

もちろん、web制作者としては、やはりクライアントのサイトをできるだけ検索の上位に表示させて少しでも反応があるように考えるのは当然のことで、言ってることが矛盾しちゃうんですけどね。

好むと好まざるにかかわらず、google様が今回のような舵取りをしていくということですので、我々もそれに適応していかないといけないと思います。
webサイト=ただの広告ではなくて、webサービス=クライアントとのコミュニケーションの仕方みたいな流れになっていくのかな?と漠然と考えています。

えっと、かなり偏った考え方かもしれませんが、いずれにしてもgoogleの動向これからもしっかり追っていきたいと思います。

2012/01/06 22:22

あけましておめでとうございます。
本年も「半人前」をそうぞよろしくお願いいたします。
さて、今年一回目のエントリーは・・・ブックレビューです。





ソーシャルシフト―これからの企業にとって一番大切なこと
著:斉藤 徹

出版されて2ヶ月ほど経ちますし、読み終えてからも1ヶ月以上空いてしまいましたが、ご紹介します。
このブログでも何度も登場しているループスコミュニケーションズの斉藤さんの最新刊です。

ソーシャルシフトという言葉は斉藤さんの造語のようです。
意訳かもしれませんが、
『ソーシャルシフトとは、(ソーシャルネットワークの普及で)企業と生活者との接し方が大きな変化。透明性の時代、ソーシャルメディアが誘起したパラダイムシフトの事』

この本の中では、いわゆるソーシャルメディアがどういったものなのかということから始まり、私たち生活者にどう影響を与えているか、そしてそれを受け、企業や団体はどう対応していけばよいのか。
また、特に中規模以上の企業において、どのようにソーシャルメディアを取り入れていけばよいかという事が書かれています。
それは、いわゆる「マーケティング」的な領域にとどまらず、会社経営や社員間での企業としての目的共有といったマネージメント的な部分も含まれています。

大企業が中心になりますが、担当者レベルでの実例紹介なども豊富に掲載されているので、イメージしやすいのではないかと思いました。

特に、企業間でのソーシャルメディアの利用は、運用ルールや目的の選定など決して簡単ではないと思うのですが、実在する企業のそういった運用ルールの一部もご紹介いただいているので、参考になります。
(零細企業であれば、担当者=代表となる事が多いと思いますが、中規模以上の企業であればそうもいかないですし、場合によっては、広報担当とクライアント対応の担当が別の人物という事もあり得ます。)

「ソーシャルシフト」の内容とは直接関係ないのですが、実はこの本は出版される前から一般に公開されていました。
Facebookの非公開グループ「ソーシャルシフトの会」の中で、ほぼ完成している原稿が公開され、メンバーは自由に読む事ができ、斉藤さんに直接フィードバックを送る事ができました。もちろん、そのフィードバックは、原稿に反映されているのですが、大変新しい試みだと思います。
ソーシャルシフトの会は、非公式グループですが、申請すれば誰でも入る事ができます。
出版後も、活動は続いていて、ソーシャルシフトへ向けてどうすればよいか、事例を紹介したり、意見を自由に発言できる場になっています。

少し話が逸れましたが、「ソーシャルシフト」大変参考になりますので、ソーシャルメディアを活用したいという方はぜひ読んでみてください。というか、こうゆう本を読んでおけば、某クチコミ系サイトの騒動みたいなことは起こらないと思うのですが・・・

2011/12/31 23:39

大晦日なので、一年を振り返った記事を書こうかと思います。

今年は・・・色々ありましたね。
震災に始まり、マツのこと、昇格。ムスメの成長。仕事的な部分でも、多少はステップアップできたかな?と思う部分もありました。(同じ位失敗もしましたが・・・)

反省面としては、毎年言っているかもしれないけど、技術を磨ききれなかった事。
勉強したいこと、実現したいことはある程度明確にあるのに、それに対して時間を割く事があまりできなかったです。
来年への課題でもあり、そろそろ、根本的に方法を考え直さないといけないかもしれないです。

アウトプット面でも、やはり、しりつぼみ的にブログのエントリー数が減っていったのは事実で、その辺も来年は改善していかないといけない部分であります。

この業界に入って、早5年が経ちました。自信はまだまだ全然なくて、日々壁にぶち当たりながら業務をこなしているのが現実なんですが、それでも多少なりに手応え的なものも感じられるようになってきたように思えます。
来年はその辺を膨らませて、自分の武器というか、塩原といえばコレ的なものが身につけられればいいですね。

あと、忘れてはならないのが、SNS。今年のエントリーを振り返るとSNSネタが本当にたくさんあって、個人的にそれだけ注目していたということなんでしょうね。
それが全てではないと思いますが、日々SNSを使っていて心地良いと感じる部分も多くあり、その辺をビジネス的にも使えるような提案ができるよう勉強していきたいです。

・・・酔いに任せて勢いで書いたエントリーなので支離滅裂ですが・・・
2012年は発展の年にしたいと思っています(というか、年齢的にそろそろ何か形にしないといけないという覚悟で)

そうは言ってもまだまだ『半人前』です。謙虚に確実に冒険していこうと思いますので、来年もよろしくお願いします。

あ、最後になりましたが・・・
2011年本当にたくさんの方にお世話になりました。言葉足らずな人間なので、十分にお礼が出来ていないかと思います。皆さん本当にありがとうございました。2012年が皆さんにとって幸せな一年になることを心よりお祈りいたしております。

2011/12/21 23:47

かなりマニアックなコトですが、個人的にはよく使うので備忘録として・・・

CMSでwebサイトを作っていると、「お知らせ」のような複数の記事を集約する場面があります。CMSによっては、複数のブログ(カテゴリー)から集約して、それぞれの要素に固有のIDなりクラスを付与することも可能ですが、場合によってはそれが難しい時もあります。

複数の外部ブログのフィードを集約したりとか・・・

例えば、動的に下記のような要素を吐き出されたとします。

<div class="item">
<a href="http://hogehoge.com/id01/1234.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id01/1254.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id02/1254.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id01/1264.html">
ここにコンテンツが入る。
</a>
</div>
<div class="item">
<a href="http://hogehoge.com/id02/1854.html">
ここにコンテンツが入る。
</a>
</div>

<div class="item">にそれぞれのid01とかid02というページ固有のクラスを付与したいけど、システム上は無理ですって時に、jqueryというかjava scriptを使って処理をする方法があります。

$('.item').each(function() {
     var url=$(this).find('a').attr('href');
     var blogid = url.substring(20);
     blogid = blogid.substring(0, blogid.indexOf("/"));
     $(this).addClass(blogid);          
});

こんな感じです。

中身は至ってシンプルで、

$('.item').each(function() {

});

で、.itemを探して繰り返し処理を行い

var url=$(this).find('a').attr('href');

で、.item直下のaタグのhref要素を取り出して、

var blogid = url.substring(29);
blogid = blogid.substring(0, blogid.indexOf("/"));
$(this).addClass(blogid);  

で、不要な文字列を削除して、 クラスとして付与するといった感じです。

かなりマニアックですが、jqueryを使えばこうゆうニッチな要求にも簡単に答えることができ、 制作者としては表現の幅が広がるので良いかと思います。

まるで、jqueryってまるで緩衝材みたいですね。

2011/12/16 22:33


ライフログプラットフォームなんて言葉があるのかわかりませんが、
今日公開されたfacebookタイムラインを使ってみると、まさにそうゆうことなんじゃないかと思った次第であります。

facebookタイムライン
これを言葉で説明するのはちょっと難しいけど、実際にみてもらうとすぐに理解出来ると思います。
facebook上の活動の記録が時系列で見ることができます。それこそ誕生から現在まで。
ここに、色んなイベントの情報をストックしていけば、完全な自分史ができるわけです。
(それがいいかどうかは別としてですけど)

賛否はあるにせよ、僕はとても面白いと思いました。
見やすいし、自分の活動を振り返ることもできるし。
今までこうゆう時系列だけど、見やすい情報サービスってなかったんじゃないかな?
ツイッターとかは、時系列だけど、「今」にしか重きを置いていないし。

ここまで作りこまれちゃうと・・・というか、ここまで用意されちゃうとfacebookを止められなくなっちゃいますね。きっと、それがfacebookの狙いなんでしょうけど。

これだけ簡単にライフログを集約できるので、今まで以上にプライバシーの管理に気をつけないといけないと思います。

fecebookは、それこそ個人の考えや活動、友好関係の集約になりつつあるので、やってて当たり前な世界になるんでしょうかね。
少なくとも初対面の人と知り合ったらfacebookで探してしまうわけですし、そこであまりに変な事が書かれていたら、印象もだいぶ変わってしまうわけですので、その辺も意識して使っていきたいですね。

2011/12/02 23:28

ソーシャルメディアのシェアボタンは、もはやwebサイトの必須項目になりつつあります。twitterのツイートボタンとか、facebookのいいねボタンとかこれって、実は実装するのって結構めんどくさいし、オフィシャルで公開しているAPIを使うと、デザインというか表示スペースを考えて元サイトのデザインを検討しなければいけないというちょっと残念な感じであったりします。

で、今日紹介するのが、sharrre
これは、jQueryのプラグインで、そういったソーシャルメディアのボタンを組み込む時に自由なデザイン、レイアウトで実装が可能になります。

デザインの変更までは調べていませんが、ソーシャルボタンの実装は比較的簡単に可能です。

使い方

まず、jQueryを読み込みます。サンプルでは、1.7を読みこんでいます。
同時に、ライブラリも読み込みます。

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="js/jquery.sharrre-1.0.0.js"></script>

次に、sharrreの設定を記述します。
基本的には元サイトのデモの通りで良いかと思いますが、

js

  $(function(){
    $('#share').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true
      },
      title: 'share',
      url: 'http://meusonho41.com/demo/2011/12/02/index.html',
      text: 'Sharrreのデモです。よかったらシェアしてね',
      buttons: {
        googlePlus: {size: 'tall'},
        facebook: {layout: 'box_count'},
        twitter: {count: 'vertical'}
      },
      hover: function(element, options){
        $(element).find('.buttons').show();     
      },
      hide: function(element, options){
        $(element).find('.buttons').hide();
      }
    });
  });

shareの部分で、シェアしたいソーシャルメディアを指定します。

urlの部分にシェアしたいURLを記述します。
CMSの場合、ここは動的にパーマリンクが入るようになればいいですね。

cssはデフォルトのまま使えばよいかと思います。
あとは、このシェアボタンを置く場所に

<div id="share"></div>

と記述して完了です。

wordpressとかですと、シェアボタンを入れてくれるプラグインなんかもありますが、それ以外の場合、いちいちサービス毎に記述しなければらなかったので、こういった形で一元登録できると便利ですね。あと、cssやjsといった馴染みの深い言語で対応できるのがいいですね。

実際に試してみると、デモサイトから各メディアへのシェアはすぐにできました。
逆にデモサイトへの反映は若干タイムラグがあるようですね。(5分くらい)

DEMO

実際に既存のサイトには組み込んでないので、少し調査した方がいいかもしれませんが、機会があれば使ってみたいと思います。

2011/11/29 21:11

昨日の記事でも少し触れましたが、面白いサービスがローンチされたのでご紹介します。

.インストール


100shikiの田口さんがスタートさせたサービスで、
3分の動画をみながら、プログラミングを学べるというものです。
java scriptやcssといったweb制作必須の言語からphpやmySQLなどのwebアプリ開発に必要な部分まで
現段階で、300タイトルの動画がアップされているとのことです。

すごい・・・

しかも無料で

現在はベータテスト中なので、招待がないと入れませんが、トップページに招待希望のメールフォームが設置されているので、気になる方はそちらからどうぞ。