スライダーの画面を作成するためにjqueryプラグイン「bxslider」を利用しました。
使い方
1 下記のソースコードを<head>内に貼り付けます。
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>
2 スライダーを利用したい<ul>や<div>に「id="slider1"」を指定します。
画面を確認するとスライダーの動作が行われているようになります。
オプションの詳細
http://bxslider.com/options
2011年12月27日火曜日
2011年10月28日金曜日
ソーシャルゲーム制作の導入
先日飲んでいる時に、友人のイラストレーターと「ゲームをつくってみよう」という話が出ました。
せっかくの機会なので、昨今の流れを汲んだソーシャルゲーム制作にチャレンジしたいと思います。
まずはソーシャルゲーム制作の流れや、制作環境を把握するためにゲーム制作についてまとめられた記事を読んで予備知識をつけます。
以下、読んだ記事
・ソーシャルゲーム、国内外の動向
・WebベースのアクションRPGを開発するならば使いたいフレームワーク「RPG JS」
・大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
・完全公開!ソーシャルゲーム設計事例:プロローグ
・Corona[1]14歳の少年が経験3カ月で大ヒットゲームを開発
・[CEDEC 2011]稼げるゲームはこう作れ。グリーが明かす「セールスランキングNo.1プロダクトの作り方」
・[iPhone][ゲーム][開発] ゲームの作り方やアルゴリズムについてAppStoreカテゴリ別に整理してみました
・ゲーム開発プロジェクトマネジメント講座
・「第21回 HTML5とか勉強会」イベントレポート
せっかくの機会なので、昨今の流れを汲んだソーシャルゲーム制作にチャレンジしたいと思います。
まずはソーシャルゲーム制作の流れや、制作環境を把握するためにゲーム制作についてまとめられた記事を読んで予備知識をつけます。
以下、読んだ記事
・ソーシャルゲーム、国内外の動向
・WebベースのアクションRPGを開発するならば使いたいフレームワーク「RPG JS」
・大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
・完全公開!ソーシャルゲーム設計事例:プロローグ
・Corona[1]14歳の少年が経験3カ月で大ヒットゲームを開発
・[CEDEC 2011]稼げるゲームはこう作れ。グリーが明かす「セールスランキングNo.1プロダクトの作り方」
・[iPhone][ゲーム][開発] ゲームの作り方やアルゴリズムについてAppStoreカテゴリ別に整理してみました
・ゲーム開発プロジェクトマネジメント講座
・「第21回 HTML5とか勉強会」イベントレポート
2011年10月25日火曜日
CSSでヘッダー・フッターの固定
CSSでヘッダー・フッターの固定方法
参考サイト
・http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
背景色、文字色、高さ、コンテンツボックスの幅は任意で指定。
参考サイト
・http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
#headerbar { position: fixed; top: 0; left: 0; height: 40px; width: 100%; background-color: #000; } /* コンテンツボックスを中央に配置したい場合 */ #headerbar-inner { width: 950px; margin-left: auto; }
背景色、文字色、高さ、コンテンツボックスの幅は任意で指定。
2011年10月21日金曜日
wp_headのトップの空白を消す
Wordpressでwp_headを書いた時にページトップに空白が入りました。
以下のリンクを参考に、function.phpに記述を追加して対処しました。
・WordPress(ワードプレス)にwp_headを入れたらトップに空白が出た時の対処
http://www.lifeisg.com/blog/other/wp_head-y/
以下のリンクを参考に、function.phpに記述を追加して対処しました。
・WordPress(ワードプレス)にwp_headを入れたらトップに空白が出た時の対処
http://www.lifeisg.com/blog/other/wp_head-y/
2011年10月9日日曜日
Bootstrapの使い方
Twitter社から公開されているフレームワーク「Bootstrap」を使ってみました。
使い方は、下記を参考にしました。
・Twitter の bootstrap を使ったメモ
http://blog.dealforest.net/2011/09/use-bootstrap-of-twitter/
class名を指定すると、CSSが反映されるみたいです。
何がどう変わるかは現在、試し中。
使い方は、下記を参考にしました。
・Twitter の bootstrap を使ったメモ
http://blog.dealforest.net/2011/09/use-bootstrap-of-twitter/
class名を指定すると、CSSが反映されるみたいです。
何がどう変わるかは現在、試し中。
2011年6月24日金曜日
iOS5 betaをダウングレード
短い間でしたが楽しく使わせてもらいました。
ダウングレードする理由ですが、
・メールの受信が安定しない
の一言に尽きます。
特にSoftBankとの相性が悪いのか、メールが一日遅れで届くことも、この短い期間で頻繁にありました。その結果、連絡が遅れて迷惑をかけてしまうこともあったので、ダウングレードすることにしました。通知センターが使えなくなることは惜しいですが、iOS5の可能性については充分に楽しめたので、秋のリリースを待つことにします。
ダウングレード方法は下記の記事を参考にしました。
元に戻す!! iOS5 beta から iOS4.3.3へのダウングレード方法
http://kawairi.jp/weblog/vita/201106143061
ダウングレードする理由ですが、
・メールの受信が安定しない
の一言に尽きます。
特にSoftBankとの相性が悪いのか、メールが一日遅れで届くことも、この短い期間で頻繁にありました。その結果、連絡が遅れて迷惑をかけてしまうこともあったので、ダウングレードすることにしました。通知センターが使えなくなることは惜しいですが、iOS5の可能性については充分に楽しめたので、秋のリリースを待つことにします。
ダウングレード方法は下記の記事を参考にしました。
元に戻す!! iOS5 beta から iOS4.3.3へのダウングレード方法
http://kawairi.jp/weblog/vita/201106143061
2011年6月20日月曜日
メールフォルダの整理
Mac内に作成しているメールのバックアップ用フォルダを確認したところ、重複して保存されているメールが多数ありました。当初は手動で対処しようかと考えたのですが、8万件近く保存されているメールを処理するのは手間なので、自動で処理できる方法を探しました。その結果、下記の記事を参考にして、メールフォルダ内を整理することができました。重複メールは1万件近くあり、手動で行っていたら膨大な手間と時間がかかっていたので、このアプリのおかげでとても助かりました。
Mail.appで重複メールを削除
http://arukansoft.net/?p=461
Trash Mail Duplicates - Mail.app内の重複したメールを一気にスキャンして削除するAppleScriptアプリ
http://idita.blog11.fc2.com/blog-entry-560.html
Mail.appで重複メールを削除
http://arukansoft.net/?p=461
Trash Mail Duplicates - Mail.app内の重複したメールを一気にスキャンして削除するAppleScriptアプリ
http://idita.blog11.fc2.com/blog-entry-560.html
2011年6月9日木曜日
iOS5 betaを使ってみた
インストール方法
iOS5 betaを実機にインストールする手順
http://golog.plus.vc/iphone/objective-c/542/
iOS5の概要
apple公式サイト
http://www.apple.com/jp/ios/ios5/
【速報】iOS5の主な特徴10個!
http://www.gizmodo.jp/2011/06/ios510.html
上記サイトより主な特徴10個抜粋
- 通知機能
- Newsstand機能
- New Safari
- Reminder
- New Camera
- New Mail
- No PC
- New Game Center
- iMessage
iOS5を使いながら、Twitterでつぶやいていたこと。
「設定画面からTwitterアカウントに入ったら、写真のビューワー画面に「ツイート」の項目が追加された。」
「iTunes10.5試し中。UIがシンプルになっている。Web2.0の様なツヤのあるデザインから少しマットになった印象。アートワークの表示スピードが上がり、全体的に軽くて使いやすい」
「Ios5 betaの デフォルト画面。remindersが追加されている。」
「初期状態だと3GSでも意外とサクサク動く。」
個人的には通知センターの通知機能が使いやすかったです。TwitterアカウントをOSで設定できることも良かったです。撮った写真を1アクションで投稿できる手軽さをみても、Twitterの利用頻度がさらに上がりそうだなと感じました。ワイヤレス同期やiMessageに関しては、今後iCloudの環境を設定して試してみたいと思います。バグは、文字化け・SoftBankのメールサーバーとの接続が切れるなどがありました。
iOS5の新機能について、他にも色々調べて試してみたいと思います。
2011年5月28日土曜日
Xcode4で実機転送
参考
・プロビジョニングファイル作成から実機転送まで(Xcode4)
ドメインは個人で取得したものを設定できる。
ここでは「com.yourdomain.*」の形式で設定。
上記の記事を参考にさせていただき、手順に沿って実機転送を試みたところ、無事に実機転送を行うことができました。
途中で迷った点もあったので、自分自身の忘備録として補足します。
”16.Xcode4のオーガナイザを開き、転送する実機をUSBのケーブルで繋ぐ。
DEVICESの下に実機の名前が表示されたら、DEVICE名をクリックして、下にある「Add to Portal」をクリック。
自動的にiOS Dev Centerに接続してiPhoneの登録をしてくれる。”
オーガナイザーはXcodeの画面で「Window」→「Organizer」から開く。
"17.iOS Dev Centerに戻り、左のメニューの「App IDs」をクリック。
※一度作成したAppIDは、削除出来ない。
右上にある「New App ID」ボタンをクリック。
Discription:半角英数字で入力。アプリ名と同じだとわかりやすい。
Bundle Seed ID (App ID Prefix):Generate New
Bundle Identifier (App ID Suffix):ドメインを逆にしたもの+アプリ名か、*にするとよい。
お勧めは、*がいい。
com.yourdomain.appname or com.yourdomain.*
ここに設定したBundole IdentifierとXcodeのinfo.plistのBundle identifierは同じにする。"
ドメインは個人で取得したものを設定できる。
ここでは「com.yourdomain.*」の形式で設定。
2011年5月17日火曜日
Xcode4で「Hello world」を一番簡単に表示する方法
Xcode4をDLしました。
しかし、Object-CもC言語も分からず、まだ何も手についていない状態です。
「Hello world」を表示させて、とりあえずそれっぽい気分を味わうための方法を考えました。
Xcodeを起動して「FIle」→「New」→「New Project」を選択します。
(もしくは「Create a new Xcode project」を選択)
「View-Based Application」を選択し、「helloWorld」という名前をつけます。
プロジェクト画面が表示されます。
「hellowWorldViewController.xib」というファイルを開きます。
Viewの一番右のアイコンをクリックします。
サイドバーが表示されます。
その後、下記の画像のように「Label」パーツを配置します。
Text項目に「Hello World」と入力します。
Font sizeを40にします。
BackgroundをDefaultにします。
ファイルを保存します。
「Product」→「Run」でiOSシミュレータが起動し、プロジェクトが実行されます。
下記の状態が確認できます。
以上で完成です。
プログラミングでもなければ、アプリと呼べる代物でもありませんが、Xcodeを初めて触った私にとっては操作感覚など雰囲気をつかむいい経験になりました。
次は、Object-Cについてもう少し詳しく調べたいと思います。
2011年3月16日水曜日
EclipseのPydevで新規プロジェクトを作成
EclipseのPydevで新規プロジェクトを作成したので、その方法について書きます。
参考記事
Eclipse Helios (3.6.1) のPydevでGoogle App Engineのサンプルをローカルで実行する
http://ohhappy.org/blog/gae/2635.html
Eclipseのメニューバーから「ファイル」→「新規」→「プロジェクト」→「Pydev google app engine project」
新規プロジェクトのダイアログで「次へ」をクリック。
プロジェクト名:任意のプロジェクト名を入力
プロジェクト・タイプ:Python
文法バージョン:2.5
インタープリター:Default
「次へ」をクリック。
Google App Engine Directory:参照からgoogle app engineのフォルダを指定。
「完了」をクリックすると、新規プロジェクトが作成されます。
私は、今回のこのステップに半日近い時間を費やしました。
2つ分からない点がありました。
・インタープリターの指定箇所
・Google App Engine Directoryの指定箇所
インタープリターについては、
他の方のブログやウェブマガジンの記事を参考にして、
私の環境に一番合っていそう方法を選び、設定しました。
ターミナルで以下の内容を入力し、表示された結果を指定。
which python
google app engine directoryについては、
参考記事の手順で、フォルダを参照できるようにしました。
FinderでGoogleAppEngineLauncher.appを表示し、右クリック。パッケージ内容を表示。
「Contents/Resources/GoogleAppEngine-default.bundle」
GoogleAppEngine-default.bundleを右クリック。パッケージ内容を表示。
「Contents/Resources/google_appengine」
google_appengineのフォルダを、サイドバーに持っていき、ショートカットの作成。
これでgoogle app engine directoryを指定できるようになるのですが、
私の場合、Eclipseのプロジェクト作成画面でこれを指定してもエラーが表示されました。
Invalid Google App Engine directory. Did not find: /Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine/lib/django
色々調べたのですが(ここに半日近い時間を費やしました)
解決できなかったために、
日頃お世話になっているエンジニアの方に相談をしました。
その結果、以下の方法で解決できました。
ターミナルで下記の2つを実行。
cd /usr/local/google_appengine/lib
ln -s /usr/local/google_appengine/lib/django_1_2 django
これで、ディレクトリの正常な指定が可能になり、プロジェクトを作成できました。
参考記事
Eclipse Helios (3.6.1) のPydevでGoogle App Engineのサンプルをローカルで実行する
http://ohhappy.org/blog/gae/2635.html
Eclipseのメニューバーから「ファイル」→「新規」→「プロジェクト」→「Pydev google app engine project」
新規プロジェクトのダイアログで「次へ」をクリック。
プロジェクト名:任意のプロジェクト名を入力
プロジェクト・タイプ:Python
文法バージョン:2.5
インタープリター:Default
「次へ」をクリック。
Google App Engine Directory:参照からgoogle app engineのフォルダを指定。
「完了」をクリックすると、新規プロジェクトが作成されます。
私は、今回のこのステップに半日近い時間を費やしました。
2つ分からない点がありました。
・インタープリターの指定箇所
・Google App Engine Directoryの指定箇所
インタープリターについては、
他の方のブログやウェブマガジンの記事を参考にして、
私の環境に一番合っていそう方法を選び、設定しました。
ターミナルで以下の内容を入力し、表示された結果を指定。
which python
google app engine directoryについては、
参考記事の手順で、フォルダを参照できるようにしました。
FinderでGoogleAppEngineLauncher.appを表示し、右クリック。パッケージ内容を表示。
「Contents/Resources/GoogleAppEngine-default.bundle」
GoogleAppEngine-default.bundleを右クリック。パッケージ内容を表示。
「Contents/Resources/google_appengine」
google_appengineのフォルダを、サイドバーに持っていき、ショートカットの作成。
これでgoogle app engine directoryを指定できるようになるのですが、
私の場合、Eclipseのプロジェクト作成画面でこれを指定してもエラーが表示されました。
Invalid Google App Engine directory. Did not find: /Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine/lib/django
色々調べたのですが(ここに半日近い時間を費やしました)
解決できなかったために、
日頃お世話になっているエンジニアの方に相談をしました。
その結果、以下の方法で解決できました。
ターミナルで下記の2つを実行。
cd /usr/local/google_appengine/lib
ln -s /usr/local/google_appengine/lib/django_1_2 django
これで、ディレクトリの正常な指定が可能になり、プロジェクトを作成できました。
2011年3月14日月曜日
MacでEclipsにPydevを導入
Mac環境でEclipsにPydevを導入したので、その方法について書きます。
参考にした記事
Mac OS XでEclipse 3.6.1とPydev他をインストールしてみた(3)
http://blog.msmhrt.jp/2010/10/mac-os-xeclipse-361pydev3.html
作業手順は、参考記事内の16~24です。
Eclipseのメニューバーから「ヘルプ」→「新規ソフトウェアのインストール」
インストール画面の作業対象に「http://pydev.org/updates」をペーストし追加ボタンをクリック。
名前に「Pydev」を入力。(ここでの名前は何でもいいらしいです。)OKをクリック。
Pydevにチェックを入れて次へ。項目を確認して次へ。ライセンス画面を確認し、同意をして次へ。
インストールダイアログが表示されます。
その後、信頼するかどうかという確認画面が表示され、全て選択をクリックしてOKボタンをクリック。
次に表示される画面で、再起動を選択し、完了です。
参考記事内25,26でインストールを確認する手順ものっています。
Eclipseのメニューバーから、「Eclipse」→「Eclipseについて」→「インストール詳細」
この画面でEclipse Pydevが表示されていれば成功です。
参考にした記事
Mac OS XでEclipse 3.6.1とPydev他をインストールしてみた(3)
http://blog.msmhrt.jp/2010/10/mac-os-xeclipse-361pydev3.html
作業手順は、参考記事内の16~24です。
Eclipseのメニューバーから「ヘルプ」→「新規ソフトウェアのインストール」
インストール画面の作業対象に「http://pydev.org/updates」をペーストし追加ボタンをクリック。
名前に「Pydev」を入力。(ここでの名前は何でもいいらしいです。)OKをクリック。
Pydevにチェックを入れて次へ。項目を確認して次へ。ライセンス画面を確認し、同意をして次へ。
インストールダイアログが表示されます。
その後、信頼するかどうかという確認画面が表示され、全て選択をクリックしてOKボタンをクリック。
次に表示される画面で、再起動を選択し、完了です。
参考記事内25,26でインストールを確認する手順ものっています。
Eclipseのメニューバーから、「Eclipse」→「Eclipseについて」→「インストール詳細」
この画面でEclipse Pydevが表示されていれば成功です。
MacでEclipsの日本語化
Mac環境でEclipsを日本語化したので、その方法について書きます。
参考にした記事
http://d.hatena.ne.jp/seiunsky/20080616/1213642878
ダウンロード
Eclips
http://www.eclipse.org/
Pleiades
http://mergedoc.sourceforge.jp/
EclipsはDL済みなので、その後の作業から。
PleiadesをDL後解凍。
finderでpleiadesのフォルダを開く。
pluginsとfeaturesの2つのフォルダ内にあるファイル(フォルダ)をコピー。
eclipsのフォルダを開き、pluginsとfeaturesそれぞれ同じ名前のフォルダにペースト。
eclips.appを右クリック。パッケージの内容を表示。eclips.iniを開く。
文末に下記の2行を追加。
-javaagent:/Applications/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=no.mnemonic
-clean
eclips.iniを保存し、再起動を行うと、日本語化が完了しています。
参考にした記事
http://d.hatena.ne.jp/seiunsky/20080616/1213642878
ダウンロード
Eclips
http://www.eclipse.org/
Pleiades
http://mergedoc.sourceforge.jp/
EclipsはDL済みなので、その後の作業から。
PleiadesをDL後解凍。
finderでpleiadesのフォルダを開く。
pluginsとfeaturesの2つのフォルダ内にあるファイル(フォルダ)をコピー。
eclipsのフォルダを開き、pluginsとfeaturesそれぞれ同じ名前のフォルダにペースト。
eclips.appを右クリック。パッケージの内容を表示。eclips.iniを開く。
文末に下記の2行を追加。
-javaagent:/Applications/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=no.mnemonic
-clean
eclips.iniを保存し、再起動を行うと、日本語化が完了しています。
登録:
投稿 (Atom)