WPのフィードをｊQueryで表示する（途中で断念）
お題：
- 同ドメイン内で、jQueryを使用してWPのフィードを取得、静的ファイル(HTML)で一覧表示させる
- 日付、カテゴリ、記事内容を表示させる
- 「Google AJAX Feed API」を使わずやってみる
参考サイト：
結果＆感想：
- ＜dd＞に記事の内容を全部表示させたいけど、取得する変数がわからなかった（"$content[1],encoded" で取得はできた）
- ＜time＞に’datetime’を入れたかったけど・・・
- カテゴリは、複数ある場合の表示が・・・
- （基礎を完全に理解できていない、まだまだ時間がかかりそう）
(function($){
$.fn.extend({
rss2render: function(options) {
var self = $(this),
c = $.extend({ url:null, number:10 },options || {});
if( !c.url ) { return false; }
self.append( 'loading...', '
// RSSの取得
$.ajax({
dataType: 'xml',
url: c.url,
success: function(data) {
$('#loading', self).remove();
if( $('item', data).length<1 ) { $('ul', self).append('記事がありません'); return false; }
$('item', data).each(function(i) {
if( i > (c.number - 1) ) { return false; }
var item = $(this);
var dateStr1 = dateFormat(item.find('pubDate').text(), 1);
var dateStr2 = dateFormat(item.find('pubDate').text(), 2);
$('dl', self).append(
$('').addClass("classname").append( $('').text(dateStr1) ),
$('', { text: $("$content[1],encoded", item).text() })
);
});
},
error: function() {
$('#loading', self).remove();
self.append('フィードの読み込みが出来ませんでした。' );
}
});
}
});
})(jQuery);
function dateFormat(publishedDate,num){
var f_date = new Date(publishedDate);
var myday = f_date.getDate();
var mymonth = f_date.getMonth() + 1;
var myyear = f_date.getFullYear();
var myhour = f_date.getHours();
var myminute = f_date.getMinutes();
var mysecond = f_date.getSeconds();
if( num==1 ) { var format_date = mymonth + "月" + myday + "日" ; }
if( num==2 ) { var format_date = myyear + '-' + mymonth + '-' + myday; }
return format_date;
}
jQuery(function($){
$('#feedBlock').rss2render({
url: 'index.xml',
number: 5
});
});
最近気になった用語【IA】「IAシンキング Web制作者・担当者のためのIA思考術」
- 作者: 坂本貴史,宮崎綾子,長谷川恭久
- 出版社/メーカー: ワークスコーポレーション
- 発売日: 2011/03/29
- メディア: 単行本
- 購入: 12人 クリック: 167回
- この商品を含むブログ (11件) を見る
Chapter 1◇IAというスキル
1-1 はじめに
1-2 価値化
1-3 プロセスとスキル
コラム：WEBにおけるエコシステム
1-4 ユーザーエクスペリエンスデザイン
1-5 プロジェクトデザインと可視化
1-6 成果物
1-7 理論と実践
Chapter 2◇情報分類とメニューの最適化
2-1 情報の整理
2-2 情報の分類
2-3 標準化の流れ
2-4 演習：料理本のメニューをつくる
2-5 演習：課題の情報整理をしてみる
演習のまとめ
コラム：ユニバーサルメニューの今後の展開
Chapter 3◇サイトストラクチャの理解
3-1 サイトストラクチャに求めるもの
3-2 文書表現
コラム：アウトラインプロセッサの可能性
3-3 演習：サイト構造を見たままトレースする
3-4 演習：ハイレベルサイトストラクチャで要点を伝える
3-5 演習：同業種のサイト構造を比較する
コラム：Web情報アーキテクチャの設計ツール
演習のまとめ
Chapter 4◇ナビゲーションパターンと用法
4-1 ナビゲーションとは
4-2 利用シーンにおけるナビゲーション
4-3 ナビゲーションにおける課題
コラム：デザインパターンとしてのナビゲーション
4-4 演習：ツリー構造からナビゲーションの基礎を知る
4-5 演習：機能というナビゲーションを知る
4-6 演習：パンくずのもう1つの側面を知る
4-7 演習：ステップのためのナビゲーションを知る
4-8 演習：目的別ナビゲーションを考える
演習のまとめ
コラム：メガドロップダウン式メニューの有効性
Chapter 5◇ユーザー行動と画面設計
5-1 エリアの原則
5-2 コンテクストを理解する
5-3 エリアにおける課題
5-4 演習：ユーザー視点で採用ページをとらえる
コラム：デザインエリアサイズ
5-5 演習：ビジネス視点でお問い合わせまで導く
5-6 演習：ユーザーニーズを行動プロセスで分解する
演習のまとめ
コラム：左利き用マウスの存在
Chapter 6◇ワイヤーフレームの設計
6-1 ワイヤーフレームの必要性
コラム：ワイヤーフレーム／プロトタイピングツール
6-2 画面設計における前提
コラム：ワイヤーフレームの上手な作成方法
6-3 効果的なプロトタイピング
6-4 ワイヤーフレームにおける課題
コラム：フォームページによるベストプラクティス
6-5 画面のエリアと要素を知る
6-6 演習：ワイヤーフレームと比較する
コラム：ワイヤーフレームライブラリの活用
6-7 演習：ワイヤーフレームからビジネス戦略をひも解く
演習のまとめ
Chapter 7◇ケーススタディ
7-1 ブランドイメージと違う企業サイト
7-2 フッターサイトマップの応用
7-3 グループ企業サイトの役割
7-4 仮説シナリオで動線の見直し
7-5 スマートフォン対応とソーシャルネットワーク
コラム：マーケティング視点からUX視点へ
プログラマーではない私が参考にしたサイト＆メモ｜Android エミュレータ
WindowsXPにインストール、、、スムーズに設定完了にならず苦戦。
原因検索のメモ。
PCでAndroidのブラウザ表示動作確認をするためにインストールするソフト
参考にしたサイト：
Android開発のための環境準備
検索するとわりと古い記事が多いけど、この記事は新しいからよいです。画像も参考になります。
JavaDrive
開発環境を初めてインストールする人、私のような初心者にはわかりやすい。とっても参考になります。
使えるようになるまでのいろいろな設定から使い方など掲載されています。
インストールはできたけど、エミュレータが起動しない！
XPの場合、インストーラに任せてそのままインストールすると
【c:Program Files】フォルダ内にインストールしていきます。
これがエラーの原因でした。
フォルダ名にスペースが入っていると、うまく起動しないみたい。
XP以降のOSは、インストールされるフォルダが違いますが、フォルダ名に気を付けて…
私のような初心者にはこのエラー原因、意味不明･･･探し方が分からない。
ひたすら検索すると、出てきました。
携帯ページへの振り分け｜htaccess
ドコモで検証していると、「無効なデータを受信しました 302」と表示されアクセスできません。
検索するとたくさん参考ページが出てきます。
その中で、特に理解しやすいサイトや書き込みがあったのでメモ。
解決：
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|WILLCOM|UP.Browser|J-PHONE|Vodafone|SoftBank|Y!J-SRD/1.0|Y!J-MBS/1.0)
RewriteRule ^(.*)$ /m/$1 [R,L]
RewriteEngine off
参考にしたサイト：
携帯振り分けと、パーマリンク書き換えのhtaccess (19 件の投稿)
URLの書き換え Rewrite
FireFox 印刷の不具合の解消-まとめ
コーディングに印刷対応の案件が入り、
ver.3.ｘの不具合などを調節するために、調べました。
ver.4.0では、バグ（？）が解消されているようです。
■カラム落ちする・重なるなど
・フロートしているBOX要素をテーブルへ設定
その他は必要に応じて微調節を。
・重なっていた要素
フロートしているBOX要素を設定すると、
その下部に配置していた要素は元の設定どおりになります。
戻らない場合は、テーブルへ設定する要素を再検証してみる必要があります。
（私の場合は、きちんとした箇所を探すことで解消できました）
div#contents { display:table; }
div#contents #leftBlock { display:table-cell; width:○px; float:none; vertical-align:top; }
div#contents #rightBlock { display:table-cell; width:○px; float:none; vertical-align:top; }
・2カラム：左右のどちらか片側のみフロート設定している場合にも、カラム落ちします。
ver.3.6では、テーブルにしなくともフロートを設定することで、解消できました。
div#contents #leftBlock { float:left; }
div#contents #rightBlock { float:right; }
■改ページがある場合の続きが表示されない
overflow:hidden; または、
overflow:auto; が原因らしい。。。
overflow:visible; を設定する
■1ページしか印刷できない
position:relative; が設定されている要素の高さを無視することが原因
position:static; を設定する
■スタイルシートの切り替え JavaScript
if (navigator.userAgent.indexOf("Firefox") != -1) {
document.write('');
document.close();
}
参考サイト：
Firefox の印刷不具合｜外部記憶
トラブルシューティング - Mozilla Firefox まとめサイト
FireFoxの印刷と闘う｜
