SDK23をインストール（アップデート）したときにエラーが出たのでその対処メモ
・エラーが出たらADTも対応したのをインストールしないといけない
（2014/7/2時点 Android 開発ツール 23.0.1.1256982）
・eclipseのヘルプ⇒更新の確認からはできない
・ヘルプ⇒新規ソフトウェアのインストールから下記のURLのADT（※）をインストールしてもできない
今のバージョンは22.xだよ～って怒られる
https://dl-ssl.google.com/android/eclipse/
※2014/7/2時点 Android 開発ツール 23.0.1.1256982
手順的には
１．使っているadtをアンインストール（自分のバージョンは22.x系でした）
eclipseのヘルプ⇒新規ソフトウェアのインストール⇒すでにインストールされているのは？
から個別に下記をアンインストール
Android DDMS
Android 開発ツール
Android 階層ビューアー
Android Native Development Tools
Android トレースビュー
Tracer for OpenGL ES
２．eclipse再起動
３．ヘルプ⇒新規ソフトウェアのインストールから下記のURLのADT（※）をインストール
https://dl-ssl.google.com/android/eclipse/
※2014/7/2時点
Android DDMS 23.0.1.1256982
Android 開発ツール 23.0.1.1256982
Android 階層ビューアー 23.0.1.1256982
Android Native Development Tools 23.0.1.1256982
Android トレースビュー 23.0.1.1256982
Tracer for OpenGL ES 23.0.1.1256982
４．eclipse再起動
自分はこれでいけました
【参考】
Android SDK 23 インストール時のエラーについて
Eclipse ADT の アンインストール 方法
2014年3月22日土曜日
【unity】【基本のk】ブロックくｚｓ・・・BlockCrusherを作ってみました
unity3Dでブロック崩しを作ってみました。
今後これを基にパーティクルとかサウンドつけたりしてみたいと思います。
BlockCrusher
【参考】
Unity3Dのゲームの作り方講座
Unityでブロック崩し
今後これを基にパーティクルとかサウンドつけたりしてみたいと思います。
BlockCrusher
【参考】
Unity3Dのゲームの作り方講座
Unityでブロック崩し
2014年3月15日土曜日
【ゲーム】画面の左右が繋がっているように見せる
キャラクターが画面の右端（左端）を越えたら左端（右端）から出てくるようにする方法です。
右端からはみ出た部分を左端から出したい場合を考えました。
①操作キャラが画面の端を越えたら新しいキャラクターを生成
②操作キャラがはみ出た分、逆側から新しいキャラクターを出す
javascript(enchant.js)による実装
キャラクターのオブジェクトを２体生成しないで済む方法が思いつきません（泣）
右端からはみ出た部分を左端から出したい場合を考えました。
①操作キャラが画面の端を越えたら新しいキャラクターを生成
②操作キャラがはみ出た分、逆側から新しいキャラクターを出す
javascript(enchant.js)による実装
キャラクターのオブジェクトを２体生成しないで済む方法が思いつきません（泣）
2014年3月14日金曜日
enchant.jsでシーンを切り替える
enchant.jsでシーンを切り替える方法です。
pushScene：ゲームにシーンを追加する
popScene：現在のシーンを取り出す
replaceScene：現在のシーンを置き換える
ゲームのタイトル画面から実際のゲーム画面への切り替えとかが出来ますね。
androidでいうところのActivityの遷移と同じですね。
sceneの内容は保持できるんでしょうか。
【参考】
enchant.jsを用いたゲーム制作-シーンの切り替えについて
pushScene：ゲームにシーンを追加する
popScene：現在のシーンを取り出す
replaceScene：現在のシーンを置き換える
ゲームのタイトル画面から実際のゲーム画面への切り替えとかが出来ますね。
androidでいうところのActivityの遷移と同じですね。
sceneの内容は保持できるんでしょうか。
【参考】
enchant.jsを用いたゲーム制作-シーンの切り替えについて
2014年3月13日木曜日
背景の無限スクロール
１枚の背景画像を使って無限に横スクロールさせる方法です。
①画面より長い背景画像を左端に表示
②背景画像を左に移動させることでスクロールさせます
③背景画像の右端が画面端に到達したら背景画像を①の位置に戻します
移動させたままだと④のように画面内に背景が表示されなくなってしまいます。
javascript（enchant.js）による背景の無限スクロール
①画面より長い背景画像を左端に表示
②背景画像を左に移動させることでスクロールさせます
③背景画像の右端が画面端に到達したら背景画像を①の位置に戻します
移動させたままだと④のように画面内に背景が表示されなくなってしまいます。
javascript（enchant.js）による背景の無限スクロール
2014年3月12日水曜日
Web上へのUnityゲームお試し投稿
Unityで作ったゲームをwebに公開するテストです。
Unityで作成したゲームをwebでプレイするためにはUnity Web Playerというプラグインをブラウザにインストール必要があります。
下記リンクをクリックしたらインストールするよう促されます。
ゲーム
【操作方法】
マウスの右クリック：ボールが現れて左方向へ放物線を描いて飛ぶ
マウスの左クリック：キューブがジャンプする
【遊び方的な】
１．マウスの右クリックでボールを飛ばす
２．マウスの左クリックでキューブをジャンプさせ、ボールが画面左に行くのを阻止する
右クリックするとメニューが開かれるからフルスクリーン推奨って感じですね。
最初からフルスクリーン状態ってどうやるんだろうか。。
ちょっとUnityが楽しいかもしれないです^^
【参考】
[Unity3D]Web Playerで作ったゲームをWebで公開
Unityで作成したゲームをwebでプレイするためにはUnity Web Playerというプラグインをブラウザにインストール必要があります。
下記リンクをクリックしたらインストールするよう促されます。
ゲーム
【操作方法】
マウスの右クリック：ボールが現れて左方向へ放物線を描いて飛ぶ
マウスの左クリック：キューブがジャンプする
【遊び方的な】
１．マウスの右クリックでボールを飛ばす
２．マウスの左クリックでキューブをジャンプさせ、ボールが画面左に行くのを阻止する
右クリックするとメニューが開かれるからフルスクリーン推奨って感じですね。
最初からフルスクリーン状態ってどうやるんだろうか。。
ちょっとUnityが楽しいかもしれないです^^
【参考】
[Unity3D]Web Playerで作ったゲームをWebで公開
2013年6月5日水曜日
和暦変換
JapaneseImperialCalendarクラスはAndroidで和暦表示できないんですかね。。
Java 6で和暦を使う
プログラミングお役立ちメモ
Java 6で和暦を使う
プログラミングお役立ちメモ
private String getJpYear(Calendar calendar) {
//西暦から和暦を取得する
//和暦変換テーブル
String warekiTable[][] = {
{"18680908","19120729", "明治"}, //明治
{"19120730","19261224", "大正"}, //大正
{"19261225","19890107", "昭和"}, //昭和
{"19890108","99991231", "平成"}}; //平成
//YYYYMMDDの形式に変換する
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(calendar.getTime());
//暦変換テーブルをサーチする
int i = 0;
for (i=0; i<warekiTable.length; i++) {
//当該西暦が開始年以上で最終年以下ならbreak
if (ymd.compareTo(warekiTable[i][0]) >= 0 && ymd.compareTo(warekiTable[i][1]) <= 0) {
break;
}
}
//暦テーブルに該当レコードがあれば、和暦年を計算する
if (i < warekiTable.length) {
int jpYear = calendar.get(Calendar.YEAR) - Integer.parseInt(warekiTable[i][0].substring(0,4)) + 1;
//和号+和暦年を返す
return warekiTable[i][2] + jpYear;
} else {
//明治より前は西暦で返す
return calendar.get(Calendar.YEAR).toString();
}
}
日付処理（Calendarクラス）
Calendarクラス
・インスタンス取得
Calendar calendar Calendar.getInstance();
・Dateオブジェクト取得
calendar.getTime();
・年取得
int year = calendar.get(Calendar.YEAR);
・月取得
int month = calendar.get(Calendar.MONTH) + 1;
・インスタンス取得
Calendar calendar Calendar.getInstance();
・Dateオブジェクト取得
calendar.getTime();
・年取得
int year = calendar.get(Calendar.YEAR);
・月取得
int month = calendar.get(Calendar.MONTH) + 1;
・日取得
int day = calendar.get(Calendar.DATE);
・時取得
int hour = calendar.get(Calendar.HOUR_OF_DAY);
・分取得
int minute = calendar.get(Calendar.MINUTE);
・秒取得
int second = calendar.get(Calendar.SECOND);
・曜日取得
StringBuffer dow = new StringBuffer();
switch (calendar.get(Calendar.DAY_OF_WEEK)) {
case Calendar.SUNDAY: dow.append("日曜日"); break;
case Calendar.MONDAY: dow.append("月曜日"); break;
case Calendar.TUESDAY: dow.append("火曜日"); break;
case Calendar.WEDNESDAY: dow.append("水曜日"); break;
case Calendar.THURSDAY: dow.append("木曜日"); break;
case Calendar.FRIDAY: dow.append("金曜日"); break;
case Calendar.SATURDAY: dow.append("土曜日"); break;
}
2013年4月10日水曜日
ウィジェット基本
■実装の基本
（１）AppWidgetProviderクラスを継承した独自クラスを作成する
AppWidgetProviderで用意されているpublic methodは６つあります。
その中から必要なメソッドをオーバーライドして独自クラスを作成します。
・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クラスでブロードキャストされたインテントのアクションによって
上記５つのメソッドのどれを呼ぶかハンドリングしているため、通常は使用することのない
メソッドです（※）。
※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
（２）表示するウィジェットのレイアウトを定義する
・Button
・Chronometer
・ImageButton
・ImageView
・ProgressBar
・TextView
（３）AppWidgetProviderInfoオブジェクトの定義
設定する基本的な項目は以下の通りです。
（１）AppWidgetProviderクラスを継承した独自クラスを作成する
AppWidgetProviderで用意されているpublic methodは６つあります。
その中から必要なメソッドをオーバーライドして独自クラスを作成します。
・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クラスでブロードキャストされたインテントのアクションによって
上記５つのメソッドのどれを呼ぶかハンドリングしているため、通常は使用することのない
メソッドです（※）。
※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
（２）表示するウィジェットのレイアウトを定義する
/res/layout/配下にXMLファイルで定義します。
ウィジェットのレイアウトはRemoteViewsに基づくため、全てのレイアウトクラスやウィジェットクラスを
サポートしている訳ではありません。
ウィジェットでサポートしているレイアウトクラス、ウィジェットクラスは以下の通りです。
レイアウトクラス
・FrameLayout
・LinearLayout
・RelativeLayout
ウィジェットクラス
・AnalogClock・Button
・Chronometer
・ImageButton
・ImageView
・ProgressBar
・TextView
（３）AppWidgetProviderInfoオブジェクトの定義
/res/xml/配下にXMLファイルを作成しエレメントを使って定義します。
・android:minWidth
・android:minHeight
ホームスクリーン上に配置するウィジェットの最小領域をdp（dip）で指定します。
Androidのホームスクリーンは、ウィジェットやアイコンを綺麗に配置させるため、
ホームスクリーン上に配置するウィジェットの最小領域をdp（dip）で指定します。
Androidのホームスクリーンは、ウィジェットやアイコンを綺麗に配置させるため、
通常であればスマートフォンは４×４、タブレットは８×７のセルに分割されています。
ウィジェットを配置する最小領域は１セルとなりますが、指定する値はdpで指定する
必要があります。
デバイスにより異なりますが、ウィジェットの最小領域（１セル）は74dpとなります。
しかし、ホームスクリーン上に配置する際、dpからpxへの変換が行われるため、
変換の丸め誤差を考慮すると指定するdpの値には、以下の計算式を当てはめます。
（セルの数×74dp）-2dp
例えば１セルの領域に配置したい場合は72dp以下を指定し、２セルの領域に配置したい場合は
146dp以下を指定します（※）。
なお、指定する値は30dpでも1dpでも、72dpを超えなければ１セルに配置されます。
Androidのサンプルソースでは以下のコードとなっていました。
※
Android4.0以降は配置するウィジェットの上下左右にマージンが付加される為、
１セルに配置したい場合は64dp以下を指定する必要があり、nexus7の端末は
79dp以下を指定する必要があるようです。
【参考】
http://d1skroid.blogspot.jp/
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html
ウィジェットを配置する最小領域は１セルとなりますが、指定する値はdpで指定する
必要があります。
デバイスにより異なりますが、ウィジェットの最小領域（１セル）は74dpとなります。
しかし、ホームスクリーン上に配置する際、dpからpxへの変換が行われるため、
変換の丸め誤差を考慮すると指定するdpの値には、以下の計算式を当てはめます。
（セルの数×74dp）-2dp
例えば１セルの領域に配置したい場合は72dp以下を指定し、２セルの領域に配置したい場合は
146dp以下を指定します（※）。
なお、指定する値は30dpでも1dpでも、72dpを超えなければ１セルに配置されます。
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以降は配置するウィジェットの上下左右にマージンが付加される為、
１セルに配置したい場合は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を指定するとウィジェットの更新は行われません。
ホームスクリーン上に配置したウィジェットを更新する間隔をミリ秒で指定します。
最小値は1800000です（30分）。
端末がスリープ状態でもupdatePeriodMillisで更新が行われる時は、スリープ状態が解除されます。
30分未満の間隔で更新したい場合や、スリープ状態が解除されてしまうのを回避したい場合は、
AlarmManagerを使用するのが一般的です。
なお、0を指定するとウィジェットの更新は行われません。
・android:initialLayout
ホームスクリーン上に配置した際のレイアウトファイルを指定します。
（４）マニフェストの設定
AppWidgetProviderクラスを継承した独自クラスをブロードキャストレシーバとして定義します。
APPWIDGET_UPDATEブロードキャストインテントを受信出来るようにに指定します。
APPWIDGET_UPDATEのみ指定すれば、他のAPPWIDGET_DELETEDや
APPWIDGET_ENABLEDなどのブロードキャストインテントも受信出来るようになります。
ホームスクリーン上に配置した際のレイアウトファイルを指定します。
（４）マニフェストの設定
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クラスのメソッドをオーバーライドして記述します。
・ウィジェットのレイアウトファイル
ホームスクリーンに追加された際のウィジェットのレイアウトを定義します。
■実装の流れ
（１）AppWidgetProviderクラスを継承した独自クラスを作成する
AppWidgetProviderクラスで用意されているonUpdateメソッドやonDeletedメソッドを
実装してウィジェットの処理を記述します。
（２）表示するウィジェットのレイアウトを定義する
/res/layout/配下にホームスクリーンに追加された際のウィジェットのレイアウトを定義します。
（３）AppWidgetProviderInfoオブジェクトの定義
/res/xml/配下にウィジェットのメタデータを<appwidget-provider>エレメントを使って
定義します。
（４）マニフェストを設定する
マニフェストファイルにAppWidgetProviderクラスを継承した独自クラスを
ブロードキャストレシーバとして<receiver>エレメントを使って定義します。
ホームスクリーン上で動作する簡易機能を持ったアプリケーションです。
（例：時計アプリ）
■実装概要
Android OSから発行された「ウィジェットに関連するブロードキャストされたインテント」を
受信することでウィジェットを管理出来ます。
ウィジェットはホームスクリーンを長押しすることで追加することが出来ますが、
この時Android OSから「ウィジェットを作ります」というブロードキャストしたインテントが
発行されます。
また、ウィジェットを削除した時は「ウィジェットを削除します」というブロードキャストした
インテントが発行されます。
このような「ウィジェットに関連するブロードキャストされたインテント」を受信できる
ブロードキャストレシーバを作成することで、ウィジェットをホームスクリーンに追加したり、
ウィジェットが削除された時にメッセージを出力したりと言った事が可能になります。
■使用する主なクラス
・AppWidgetProvider
「ウィジェットに関連するブロードキャストされたインテント」を受信するクラスです。
BroadcastReceiverクラスを継承しており、受信したブロードキャストインテントの
ハンドリングを行います。
■必要なリソース
・AppWidgetProviderInfoオブジェクトを定義したXMLリソース
ウィジェットのメタデータ（ウィジェットの最小サイズ、使用するレイアウトのリソース、
更新間隔など）を定義します。
・AppWidgetProviderクラスを継承した独自クラス
ウィジェットが作成された時、更新された時、削除された時などの処理を
AppWidgetProviderクラスのメソッドをオーバーライドして記述します。
・ウィジェットのレイアウトファイル
ホームスクリーンに追加された際のウィジェットのレイアウトを定義します。
■実装の流れ
（１）AppWidgetProviderクラスを継承した独自クラスを作成する
AppWidgetProviderクラスで用意されているonUpdateメソッドやonDeletedメソッドを
実装してウィジェットの処理を記述します。
（２）表示するウィジェットのレイアウトを定義する
/res/layout/配下にホームスクリーンに追加された際のウィジェットのレイアウトを定義します。
（３）AppWidgetProviderInfoオブジェクトの定義
/res/xml/配下にウィジェットのメタデータを<appwidget-provider>エレメントを使って
定義します。
（４）マニフェストを設定する
マニフェストファイルにAppWidgetProviderクラスを継承した独自クラスを
ブロードキャストレシーバとして<receiver>エレメントを使って定義します。
2012年11月16日金曜日
SyntaxHighLighterの改行アイコンを消す方法
以前こちらの記事でSyntaxHighLighterの導入方法を書きました。
初期設定でも問題なく使えるのですが、改行アイコンが邪魔だったため消しました。
改行アイコンを消すことでツールバーのアイコンが消えてしまいます。
少しそこでつまずいたのでメモします。
（２）http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.cssにアクセスしてcssの内容をコピー。
（３）bloggerの「カスタマイズ⇒アドバンス⇒（スクロール下）CSSを追加」からコピーしたcssの内容を貼り付け。
（４）cssの下記箇所を修正。
display～の行を修正するだけでも問題ありません。
padding～、text～は改行テキストのパディングとインデントの指定になるため必要であれば残してください。
・修正前
（５）urlの相対パスを、以下のように絶対パスに修正（4箇所）。
cssをbloggerに記述したことによって、ツールボックスのアイコン（png）が表示されなくなります。
pngファイルを読み込む際にcssと同ディレクトリを参照しますが、bloggerには該当のpngファイルが存在しないためです。
・修正前
【参考サイト】
SyntaxHighlighter2.0の使い方 | Web制作支援 | ShanaBrian Website
初期設定でも問題なく使えるのですが、改行アイコンが邪魔だったため消しました。
改行アイコンを消すことでツールバーのアイコンが消えてしまいます。
少しそこでつまずいたのでメモします。
（１）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
2012年11月15日木曜日
長いソースをはみ出さずに投稿する方法
SyntaxHighLighter2.x系で長いソースがはみ出ないようにする方法をメモ。
（１）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）を導入しました。
以下、導入の際のメモです。
（１）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」をクリック
（５）下記コードが表示されるのでコピー
これでbloggerでのSyntaxHighLighterの導入は完了です。
bloggerへのソースの投稿方法は調べると出てくるので割愛。。
ただし、上記のままだと長いソースを投稿した際にソースがはみ出る場合があります。
はみ出さないようにする設定方法はこちらの記事で記載します。
【参考サイト】
・導入方法
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
暇つぶし: Syntax Highlighter
・verによる違い
SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript - 道すがら講堂
・ver2.0.320について SyntaxHighlighter 2.0.320 の使い方 - NAVER まとめ
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 まとめ
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の仕様変更でツイート取得できなくなった時の応急処置
登録:
投稿 (Atom)