さて前回の記事「Twitter REST APIでタイムラインを取得して、Twitter-text-phpでアンカー表示」で、タイムラインのリンク付表示までしたのだけど、色々まだやりたい事がありました。やりたい事は以下のとおりです。 取得したツイート内のハッシュ、ユーザー、外部URLにリンクを張りたい 取得したツイート内のt.coのURLを表示用URL(元の短縮URL)に置き換えたい 取得したツイート内の画像をサムネイル表示したい 前回の記事で書いたように、Twitterの仕様変更で、URLがt.coラップされてしまいますが、そのツイートに付属するデータがごっそりEntitiesという要素内に入っていますので、基本的にはこのEntitiesを参考にしてt.coのURLを置き換えたり、ツイート画像を表示したりします。 Twitter Entities要素について この要素にはツイートに付属
Facebookページを作った次は定期的にFacebookページに情報を投稿したいものです。 その場合はアプリと連携する必要があり、つまり自作アプリを作る必要があります。 アプリの連携を行いうと任意のタイミングでFacebookページに情報の投稿が可能となります。 ザックリとした手順は Facebookページの作成 アプリを登録してApp IDとApp Secretを取得 Facebook PHP SDKをダウンロード App IDとApp Secretを基にしてアプリの認証 アクセストークンを取得 FacebookページへPOST です。 STEP1:Facebookページの作成 Facebookページの作り方はこちらのエントリーを参照してください。 STEP2:アプリを登録 アプリの登録はこちらのエントリーのSTEP1を参考にしてください。 テスト中はSanbox Modeを
みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3|画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。前回はWebサイトの高速化を行うにあたり知っておきたい「HTTPの仕組み」について紹介しました。 HTTPの仕組みについて何となく理解できたでしょうか? この連載で紹介していく高速化テクニックの解説を理解するために必要ですので、都合の良い時に読んでおいてください。 「いつ読むか? 今でしょ!」なんてね(笑) もう古いですね。 対象者 この記事では、特にWebデザイナーを対象としています。 フロントエンドエンジニアの方はWebデザイナーから受け取ったPSD(Adobe Photoshop Data)ファイルや、AI(Adobe Illustrator Data)ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。 Webデザイナー フロントエンドエンジニア Webディレクター Web担当者 ビ
A simple online web page compression / deflate / gzip test tool Introducing GIDZipTest™, a simple web page compression / gzip test tool. Add some PHP code to compress your web pages and test it out with this quick gzip / deflate encoding test tool. Also, please read the article: How do I compress my web site? This version of the tool is able to identify web pages with deflate encoded content as we
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
robots.txtとは robots.txtは、検索エンジン向けの情報を記述したテキストファイルで、書式に従って書くことで検索エンジンのクローラーにクロールして欲しくないページを知らせたりします。というか、まあ基本的に出来ることはそれのみですね。例えば、 User-Agent: * Disallow: / こうrobots.txtに書くとルート以下全てのファイルへのクロールを禁止します。 決められた書式があって、それに沿った形で書かれていればクローラーはある程度いう事を聞きます。 humans.txtとは robots.txtがロボットの為の説明であるなら、humans.txtは人間の為の説明です。人間がサイトについて受け取りたい情報としては誰が書いたのか、何を使って書かれたのか、というようなことでしょうか。 そしてこのhumans.txtを設置する事を推奨するサイトもあり、面白いなーと
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 @font-face { font-family: "FontAwesome"; src: url('/font/fontawesome-webfont.eot'); /* IE9 Compat Modes */ src: url('/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/font/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */ url('/font/f
レスポンシブwebデザインについて勉強してみました。 勉強がてら簡単なテンプレートをつくってみたものの、いろんなところで躓きまくったので、制作過程で得た情報や注意点などを忘れないうちに全部まとめておこうと思います。 レスポンシブwebデザインとは 1つのソース(html)をもとに、ウインドウサイズに応じてページのレイアウトを変化させる手法。 CSS3のMedia Queryでレイアウトを制御する。 基本的にはリキッドデザインだが、デバイスごとにレイアウトを変化させるため、ページ内の要素や配置、画像、フォントサイズなどを、設定したブレークポイントごとに調整する必要がある。 勉強したり参考にさせていただいたサイト →レスポンシブwebデザインで制作する時のポイント →CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き →レス
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
It can easily be proved that jQuery is the dominant player in the javascript libraries market. It is bundled with WordPress, the most used blogging system, and Google provides a cached version of the script. This library is most often used to add effects on your website easily, and navigation is an element that can be drastically improved by adding effects, whether it’s to hide part of the text or
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン(以下、RWD)の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
もう数年前にコリスさんやCREAMUさんで紹介されてましたが、恥ずかしながら知らなかったです。こんなに素敵なサイトがあったなんて。 最近DesignModoで紹介されていたので知りました。 すげー関係無いけどCREAMUさんのブログ超好きです 全部フリー 基本的には全て商用可。だそうです。 100% Free For Commercial Use. ただしフォントそれぞれにライセンスはあるので一応、要確認。 とても探しやすく、種類も豊富。400近くはあるんじゃないでしょうか? 個人的には探しやすい点がとても気に入りました。 そしてもう一つ素敵なコンテンツがあったのですが Webfont kit がDLできる。そして作れる。 うちのサイト名やナビゲーション等に@font-faceでLeague Gothicを使ってますが、この@font-faceでwebfont使う時に必要な
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した.svgの要素と属性は実際の例を踏まえて説明したつもり. 注意事項 仕様はここを参照のこと. 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため,多々間違いが入ってしまうかもしれないが,気にしない. スクリプトを使ってsvg要素の中身(ソース)を出力しているため,一部実際のコードと表示されるコードとの間に差異があるが,予めご了承いただきたい. 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので,複雑な図形は素直にinkscape等専用のツールを使うと良い.ただ,ここで示したことはツールを使う上でも役に立つと思う.特にアニメーションなど. svg:ベクター画像のカンバスの定義,title:タイトル,desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F
iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAndroid端末といった解像度でも綺麗に画像を表示させる
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く