2013年3月31日日曜日

ウィジェット：基本

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


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

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

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


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


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

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

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


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

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

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

（４）マニフェストを設定する
マニフェストファイルにAppWidgetProviderクラスを継承した独自クラスを
ブロードキャストレシーバとして<receiver>エレメントを使って定義します。
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2012年11月16日金曜日

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

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

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

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

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


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

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

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

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

（４）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;
}

（５）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

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2012年11月15日木曜日

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


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

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

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}
【参考サイト】
pre要素で折り返しをするためのCSS: 小粋空間
投稿者 時刻: 0 件のコメント:
ラベル: , ,

bloggerへのSyntaxHighLighter（ver2.0.320）の導入

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

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

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

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

<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>
（６）上記は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>
（７）bloggerの「テンプレート⇒HTMLの編集⇒続行」から、上記コードを</head>の直前へ貼り付ける。

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

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

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

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


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

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の仕様変更でツイート取得できなくなった時の応急処置
投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)