2013年4月10日水曜日

ウィジェット基本

■実装の基本
(1)AppWidgetProviderクラスを継承した独自クラスを作成する
AppWidgetProviderで用意されているpublic methodは6つあります。
その中から必要なメソッドをオーバーライドして独自クラスを作成します。

・onEnabled(Context context)
一番最初のウィジェットが作成された時に呼ばれます。
ホームスクリーン上に複数ウィジェットを作成した時、一番最初に作成したウィジェットのみ
このメソッドが呼ばれます。

・onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds)
ウィジェットが作成された時、またはAppWidgetProviderInfoオブジェクトの
android:updatePeriodMillisに指定した時間が経過した時に呼ばれます。

・onDeleted(Context context, int[] appWidgetIds)
ウィジェットが削除された時に呼ばれます(※)

・onDisabled(Context context)
一番最後のウィジェットが削除された時に呼ばれます。
ホームスクリーン上に複数ウィジェットを作成されている時、一番最後に削除した
ウィジェットのみこのメソッドが呼ばれます。

・onAppWidgetOptionsChanged(Context context,
AppWidgetManager appWidgetManager,
int appWidgetId,
Bundle newOptions)
API Level16(Android4.1)から追加されたメソッドで、ウィジェットのサイズが変更された時、
またはウィジェットをホームスクリーンに配置した時に呼ばれます。

・onReceive(Context context, Intent intent)
ブロードキャストされたインテントを受信した時に呼ばれます。
AppWidgetProviderクラスでブロードキャストされたインテントのアクションによって
上記5つのメソッドのどれを呼ぶかハンドリングしているため、通常は使用することのない
メソッドです(※)。

※Android1.5においてonDeleted()メソッドが呼ばれるべき時に呼ばれないバグがあります。
回避手段としてonRecevie()メソッドをオーバーライドして、onDeleted()メソッドを呼んであげる
必要があります。
【参考】
http://developer.android.com/guide/topics/appwidgets/index.html
http://www.atmarkit.co.jp/fsmart/articles/android10/android10_2.html


(2)表示するウィジェットのレイアウトを定義する
/res/layout/配下にXMLファイルで定義します。
ウィジェットのレイアウトはRemoteViewsに基づくため、全てのレイアウトクラスやウィジェットクラスを
サポートしている訳ではありません。
ウィジェットでサポートしているレイアウトクラス、ウィジェットクラスは以下の通りです。

レイアウトクラス
・FrameLayout
・LinearLayout
・RelativeLayout

ウィジェットクラス
・AnalogClock
・Button
・Chronometer
・ImageButton
・ImageView
・ProgressBar
・TextView


(3)AppWidgetProviderInfoオブジェクトの定義
/res/xml/配下にXMLファイルを作成しエレメントを使って定義します。
設定する基本的な項目は以下の通りです。

・android:minWidth
・android:minHeight
ホームスクリーン上に配置するウィジェットの最小領域をdp(dip)で指定します。
Androidのホームスクリーンは、ウィジェットやアイコンを綺麗に配置させるため、
通常であればスマートフォンは4×4、タブレットは8×7のセルに分割されています。
ウィジェットを配置する最小領域は1セルとなりますが、指定する値はdpで指定する
必要があります。
デバイスにより異なりますが、ウィジェットの最小領域(1セル)は74dpとなります。
しかし、ホームスクリーン上に配置する際、dpからpxへの変換が行われるため、
変換の丸め誤差を考慮すると指定するdpの値には、以下の計算式を当てはめます。

(セルの数×74dp)-2dp

例えば1セルの領域に配置したい場合は72dp以下を指定し、2セルの領域に配置したい場合は
146dp以下を指定します(※)。
なお、指定する値は30dpでも1dpでも、72dpを超えなければ1セルに配置されます。
Androidのサンプルソースでは以下のコードとなっていました。
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="60dp"
    android:minHeight="30dp"
    android:updatePeriodMillis="86400000"
    android:initialLayout="@layout/appwidget_provider"
    android:configure="com.example.android.apis.appwidget.ExampleAppWidgetConfigure"
    android:resizeMode="horizontal"
    >
</appwidget-provider>


Android4.0以降は配置するウィジェットの上下左右にマージンが付加される為、
1セルに配置したい場合は64dp以下を指定する必要があり、nexus7の端末は
79dp以下を指定する必要があるようです。
【参考】
http://d1skroid.blogspot.jp/
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html


・android:updatePeriodMillis
ホームスクリーン上に配置したウィジェットを更新する間隔をミリ秒で指定します。
最小値は1800000です(30分)。
端末がスリープ状態でもupdatePeriodMillisで更新が行われる時は、スリープ状態が解除されます。
30分未満の間隔で更新したい場合や、スリープ状態が解除されてしまうのを回避したい場合は、
AlarmManagerを使用するのが一般的です。
なお、0を指定するとウィジェットの更新は行われません。

・android:initialLayout
ホームスクリーン上に配置した際のレイアウトファイルを指定します。


(4)マニフェストの設定
AppWidgetProviderクラスを継承した独自クラスをブロードキャストレシーバとして定義します。
APPWIDGET_UPDATEブロードキャストインテントを受信出来るようにに指定します。
APPWIDGET_UPDATEのみ指定すれば、他のAPPWIDGET_DELETEDや
APPWIDGET_ENABLEDなどのブロードキャストインテントも受信出来るようになります。

<receiver android:name="com.aez.example.appwidget.provider.ExampleAppWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>
    <meta-data android:name="android.appwidget.provider" android:resource="@xml/example_appwidget_info"/>
</receiver>

2013年3月31日日曜日

ウィジェット:基本

■ウィジェットとは
ホームスクリーン上で動作する簡易機能を持ったアプリケーションです。
(例:時計アプリ)


■実装概要
Android OSから発行された「ウィジェットに関連するブロードキャストされたインテント」を
受信することでウィジェットを管理出来ます。

ウィジェットはホームスクリーンを長押しすることで追加することが出来ますが、
この時Android OSから「ウィジェットを作ります」というブロードキャストしたインテントが
発行されます。
また、ウィジェットを削除した時は「ウィジェットを削除します」というブロードキャストした
インテントが発行されます。

このような「ウィジェットに関連するブロードキャストされたインテント」を受信できる
ブロードキャストレシーバを作成することで、ウィジェットをホームスクリーンに追加したり、
ウィジェットが削除された時にメッセージを出力したりと言った事が可能になります。


■使用する主なクラス
・AppWidgetProvider
「ウィジェットに関連するブロードキャストされたインテント」を受信するクラスです。
BroadcastReceiverクラスを継承しており、受信したブロードキャストインテントの
ハンドリングを行います。


■必要なリソース
・AppWidgetProviderInfoオブジェクトを定義したXMLリソース
ウィジェットのメタデータ(ウィジェットの最小サイズ、使用するレイアウトのリソース、
更新間隔など)を定義します。

・AppWidgetProviderクラスを継承した独自クラス
ウィジェットが作成された時、更新された時、削除された時などの処理を
AppWidgetProviderクラスのメソッドをオーバーライドして記述します。

・ウィジェットのレイアウトファイル
ホームスクリーンに追加された際のウィジェットのレイアウトを定義します。


■実装の流れ
(1)AppWidgetProviderクラスを継承した独自クラスを作成する
AppWidgetProviderクラスで用意されているonUpdateメソッドやonDeletedメソッドを
実装してウィジェットの処理を記述します。

(2)表示するウィジェットのレイアウトを定義する
/res/layout/配下にホームスクリーンに追加された際のウィジェットのレイアウトを定義します。

(3)AppWidgetProviderInfoオブジェクトの定義
/res/xml/配下にウィジェットのメタデータを<appwidget-provider>エレメントを使って
定義します。

(4)マニフェストを設定する
マニフェストファイルにAppWidgetProviderクラスを継承した独自クラスを
ブロードキャストレシーバとして<receiver>エレメントを使って定義します。

2012年11月16日金曜日

SyntaxHighLighterの改行アイコンを消す方法

以前こちらの記事でSyntaxHighLighterの導入方法を書きました。

初期設定でも問題なく使えるのですが、改行アイコンが邪魔だったため消しました。

改行アイコンを消すことでツールバーのアイコンが消えてしまいます。

少しそこでつまずいたのでメモします。


(1)bloggerの「テンプレート⇒HTMLの編集⇒続行」に貼り付けたSyntaxHighLighterのコードから下記1行を消去して「テンプレートを保存」。

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>

(2)http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.cssにアクセスしてcssの内容をコピー。

(3)bloggerの「カスタマイズ⇒アドバンス⇒(スクロール下)CSSを追加」からコピーしたcssの内容を貼り付け。

(4)cssの下記箇所を修正。
 display~の行を修正するだけでも問題ありません。
padding~、text~は改行テキストのパディングとインデントの指定になるため必要であれば残してください。

・修正前
.syntaxhighlighter .line .content .block
{
    display: block !important;
    padding-left: 1.5em !important;
    text-indent: -1.5em !important;
}
・修正後
.syntaxhighlighter .line .content .block {
 background: none !important;
}


(5)urlの相対パスを、以下のように絶対パスに修正(4箇所)。
cssをbloggerに記述したことによって、ツールボックスのアイコン(png)が表示されなくなります。
pngファイルを読み込む際にcssと同ディレクトリを参照しますが、bloggerには該当のpngファイルが存在しないためです。

・修正前
 background-image: url(magnifier.png) !important;
 background-image: url(page_white_code.png) !important;
 background-image: url(printer.png) !important;
 background-image: url(help.png) !important;
・修正後
 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/magnifier.png) !important;
 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/page_white_code.png) !important;
 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/printer.png) !important;
 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/help.png) !important;

【参考サイト】
SyntaxHighlighter2.0の使い方 | Web制作支援 | ShanaBrian Website

2012年11月15日木曜日

長いソースをはみ出さずに投稿する方法


SyntaxHighLighter2.x系で長いソースがはみ出ないようにする方法をメモ。

(1)bloggerの「テンプレート⇒カスタマイズ⇒アドバンス⇒CSSを追加」へ以下のコードを記載。

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}
【参考サイト】
pre要素で折り返しをするためのCSS: 小粋空間

bloggerへのSyntaxHighLighter(ver2.0.320)の導入

bloggerへのSyntaxHighLighterの導入方法は調べれば出てくるのですが、ver3.x系の導入方法が多いですね。

ver3.x系はソースコードの改行表示に対応してなかったので、自分はver2.x系(ver2.0.320)を導入しました。

以下、導入の際のメモです。

(1)How to Add Syntax Highlighter(v3) to Blogger Blogsにアクセス
(2)サイト内の「GENERATE SCRIPTS」をクリック
(3)「Select a Theme」でbloggerへ表示するSyntaxHighLigherのテーマを、「Select Brushes」でSyntaxHightLigherを適用させたいコードを選択。
(自分はテーマは「default」コードはSQL、CSS、JavaScript、Xml、Javaを選択しました)
(4)選択したら「Generate」をクリック
(5)下記コードが表示されるのでコピー

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
(6)上記はver3.0.83(2012.11.15時点)なのでメモ帳などに貼り付けて、コードのhttp://alexgorbatchev.com/pub/sh/current/currentの部分をhttp://alexgorbatchev.com/pub/sh/current/2.0.320へ修正

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
(7)bloggerの「テンプレート⇒HTMLの編集⇒続行」から、上記コードを</head>の直前へ貼り付ける。

これでbloggerでのSyntaxHighLighterの導入は完了です。

bloggerへのソースの投稿方法は調べると出てくるので割愛。。

ただし、上記のままだと長いソースを投稿した際にソースがはみ出る場合があります。

はみ出さないようにする設定方法はこちらの記事で記載します。


【参考サイト】
・導入方法
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
暇つぶし: Syntax Highlighter
・verによる違い
SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript - 道すがら講堂
・ver2.0.320について SyntaxHighlighter 2.0.320 の使い方 - NAVER まとめ

2012年11月10日土曜日

twitterウィジェット(新⇒旧)

新twitterウィジェットがブログ上で表示されなくなったので旧ウィジェットを設置したついでにコードを置きます。 ツイッターIDにはTLを表示させたいツイッターのIDを設定します。
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 10,
  interval: 6000,
  width: 220,
  height: 300,
  theme: {
    shell: {
      background: '#51b3e0',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#1c2e4f',
      links: '#0a8dff'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('ツイッターID').start();
</script>
参考サイト Twitterプロフィールウィジェットのカスタマイズ TwitterAPIの仕様変更でツイート取得できなくなった時の応急処置