タグ

ブックマーク / designblog.ecstudio.jp (8)

  • Facebook コメントプラグインをWordPressに設置する手順とコメントを管理する方法 - EC studio デザインブログ

    [追記]2010/08/25 記事投稿時には、コメントの通知が受け取れないと書いていましたが、FacebookアプリケーションとWordpressのFacebook Comments for WordPressを紐付けておけば、Facebook側のComment Moderation toolにmoderatorとして登録したユーザーにはコメントのお知らせが通知されるようです。 突然ですが、Facebook活用していますか? 弊社ではFacebook活用の一つとして、先日社長ブログにFacebookコメントを設置しました。 しかし設置したまでは良かったのですが、このFacebookコメント、新しいプラグインになってから新着コメントの通知ができなくなったようで、せっかくコメントをいただいても見逃してしまう、何かいい方法はないのか!となりました。 そこで、今回は弊社でおこなっているコメント管

  • WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ

    このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン(Responsive Web Design)(ご指摘ありがとうございます。)に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境(パソコン、iPhoneAndroid など)に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ

  • 簡単にCSS3を使おう!お役立ちCSS3ジェネレーターまとめ - EC studio デザインブログ

    CSS3を使いたくても、コードを書くのがなかなか難しい。 そんなときはCSS3ジェネレーターで作成してみてはいかがでしょうか? 視覚的に確認できるので、ちょっとした調節も簡単。 気に入った形を作成して、コピー&ペーストでスタイルシートに貼るだけです。 ジェネレーターを使って、ぜひCSS3にチャレンジしてみてください。 複数のプロパティを作成する場合 CSS3プロパティジェネレーター http://css-eblog.com/eblog_sample/0912/css3-generator/ 日語のジェネレーターなので英語が苦手な方におすすめ。 gradient, box-shadow, text-shadow, border-radiusを生成できます。 CSS3 Generator http://css3generator.com/ 様々なCSS3のコードを作成できます。 ほとんどが値

  • HTML5を今すぐ使うためのコツや情報をまとめてみました - EC studio デザインブログ

    この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。(今も改善を続けています。) http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ(ユーザーエージェント)にとって未知な存在の要素を生成し、認識させることができます。

    keijix
    keijix 2010/07/31
  • Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法 - EC studio デザインブログ

    Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込

  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ

    弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記: iPhone向けサイト制作の書籍を執筆しました! 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5+CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張(CSS)があります。検証の際は、通常のSafariのウィンドウサイズを狭くし

  • プログラミングできないデザイナーでも制作できるTwitter bot 制作メモ - EC studio デザインブログ

    いよいよ師走に突入しました。 この季節になると良く耳にするのが、「流行語大賞」や「2009年●×大賞」といった1年を振り返る話題ですよね。 Web界隈で言うと、今年話題になったもののひとつとして「Twitter」は外せないのではないでしょうか。 そのTwitterですが、最近ではプログラムによって自動でツイートされるTwitter botも増えてきて、天気予報やニュースを配信する便利系から、お笑い芸人のパロディなどのエンタメ系まで様々です。 プログラマが個人で制作されているケースも多く、Googleで検索すると制作の参考になるサイトが結構引っかかります。 今回は、それらのサイトを参考に個人的にTwitter botを制作したときのメモをまとめたいと思います。 もしよろしければご参考ください。 まずは、Twitter botの核となるプログラム 今回はPHPで組みました。 「なぜ、PHPなの

  • 1