カテゴリー: WEB

とっても簡単！綺麗にデザインされたスマートフォンサイトが作れます！のサイト

投稿者：isc_blog

smart4me　というサイトで簡単にスマフォ向けモバイルサイトが作成出来るということを
Android SDK逆引きハンドブックの著者のn_aoiさんのツイートで知ったのでちょっといじってみようと思います。

こちらです！↓↓↓
とっても簡単！綺麗にデザインされたスマートフォンサイトが作れます！ – smart4me

まずは・・・ユーザー登録から・・・

アイ・エス・シーの方もその他の皆さんも試してみてください！

サイトが出来たらURL公開します！（予定）

2011年5月23日

ブログに各種プログラムのコードを載せるときの方法[wordpress用]（今更・・・）

投稿者：isc_blog

このブログを書くようになってからいろいろ知ることが多くて勉強になってるんですが
今更ながら、コードを記述するのに良い方法を知ったのでご紹介
（技術系のブログを書いている方は知っていると思いますが・・・）

ここを見たら・・・
http://en.support.wordpress.com/code/posting-source-code/

なになに
［sourcecode language=”css”］
your code here
［/sourcecode］
※上記、実際は半角です。

みたいな記述で出来るプラグインがある！？

http://alexgorbatchev.com/SyntaxHighlighter/

これは便利だ！（いまさらながら）

http://cho-co.be/blog/wordpress/wordpress-syntax-highlighter-for-wordpress/

なんでも［java］（実際は半角）と［/java］で囲むとjavaコードがカッコ良く…

[java]
package jp.co.iscTokyo.sample;

public class Sample {
public static void main(String[] args) {
System.out.println("Hello Local!");
}
}
[/java]

どうでしょうか…（ブログ更新前の気持ち）

できた！（更新後の気持ち）

最終的に
SyntaxHighlighter Evolved
をインストールしました。

2011年5月22日

教えて！エラい人！（あなたのブラウザ環境調査）

投稿者：isc_blog

開発者の皆さん
開発してない方もOKです。

使用しているウェブブラウザをお教えください！
複数使用している場合は複数の使い分けなど教えていただけると助かります。
また、アドオンツールなど便利なものがあったら教えてください。

コメントにて大募集します！
アイ・エス・シー関係者の方、部外者の方、関係なく投稿してください！
コメントは「テンプレート」を用意しますが、テンプレートに沿う必要はありません。

———– テンプレート ———————–
１．ご職業
２．ご使用のブラウザ（複数可）
３．便利なアドオンツールがあれば教えてください
４．自由欄
—————————————————–
よろしくお願い致します！

楽しみに待っています！！！

2011年5月20日

Google 拡張機能　・・・　結局　公開しました！

投稿者：isc_blog

結局、個人的に今後もツールを作るであろう・・・ということでデベロッパー登録してしまいました。

で、拡張機能デビューです。

ダウンロードはこちらから
速攻！native2ascii

使う人って限られてるけど無意味にインストールしてみてください。

今後、バージョンアップして使いやすくしていきたいと思います。

2011年5月19日

Google 拡張機能そして世界公開へ・・・のはずが

投稿者：isc_blog

参考資料
スマートネットワーク開発ブログ：Google chrome extension(拡張機能)を開発してみた

個人的に欲しかった
Javaの「native2ascii」をやってくれるアドオンを作ってみたので
世界に向けて公開したいと思います。

Google Chromeの拡張機能を作ってみる！
で紹介したとおりに拡張機能を作ったあと・・・

「パッケージ化」から説明したいと思います。

「拡張機能のパッケージ化…」ボタンを押します。

ルートディレクトリを指定後
「OK」ボタンを押すと

と表示されて秘密鍵が作られました。
「GoogleExtensionNative2Ascii.pem」

chrome拡張のダッシュボード画面を開きます。
https://chrome.google.com/extensions/developer/dashboard

「Add new item」ボタンを押します。

同意文章が表示されますのでよく読んでから同意チェックして
「Accept」ボタンを押します。

Upload an extension or app (.zip file)
ということで
先ほどのフォルダをZIP圧縮したものをファイル選択ダイアログで選択します。

アップロード完了

おおっ！なんだかそれらしい画面になりました。

とりあえず必要事項を入力しながらも疲れたのでちょいと保存したところがこれです。
[Sava draft and return to dashboard]ボタンを押しました。

そして「Edit」でダッシュボードに戻って今度は公開・・・・
「Publish to test account」ボタンを押してみました。

Publish？　みたいに聞かれるので
思わず「OK」押してしまいます。

・・・・「Please upload at least one screenshot, video or slide show.」
ってエラーみたいなのが出てる・・・
「少なくとも一つのスクリーンショット、ビデオ、スライドショーをアップロードしてください。」
ということらしい・・・

なのでスクリーンショットを取って・・・アップロードします。

もう一度、「Publish to test account」ボタンを押してみました。

あ、
「A one-time developer registration fee of $5.00 is required to verify your account and publish items. Pay this fee now – Learn more」
という文言が・・・・

はじめだけ5ドル必要なんですね。

そりゃそうか・・・

ちょっと打診しないと・・・

当面は自分のデスクトップでだけ使います・・・・

2011年5月19日

Google Chromeの拡張機能を作ってみる！

投稿者：isc_blog

Google Chrome アドオン　作成　日記

※参考資料
Google Chrome Hello worldの作り方アドオン機能を開発者向けに解禁

ここ↓閲覧しながら進めることにします。
http://code.google.com/chrome/extensions/index.html

開いたら・・・
引用 ——————-
How do I start?
1.Follow the Getting Started tutorial
2.Read the Overview
3.Keep up-to-date by reading the Chromium blog
4.Subscribe to the chromium-extensions group
————————
とあるので

まずは Getting Started tutorial
http://code.google.com/chrome/extensions/getstarted.html

「Create and load an extension」の章を見てやってみる（全編英語なのが辛いけどがむばる）
1.Create a folder somewhere on your computer to contain your extension’s code.
要するにどこでもいいからフォルダ作れってことね。
はい作成。

「GoogleExtension」フォルダをc:\に作りました。

2.Inside your extension’s folder, create a text file called manifest.json, and put this in it:

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}

作ったフォルダに「manifest.json」って名前で上記のコード記述しろって言ってるよね。

はい、完了！

3.Copy this icon to the same folder:
Download icon.png
同じフォルダにicon.pngをダウンロードしろって言ってるのでダウンロードします。

4.Load the extension.

a.Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
b.If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
c.Click the Load unpacked extension button. A file dialog appears.
d.In the file dialog, navigate to your extension’s folder and click OK.

a.レンチのアイコンをクリックして　Tools → Extensions 開く（日本語だとツール→拡張機能）
b.デベロッパーモードが「＋」だったらクリックして・・・
c.「パッケージ化されていない拡張機能を読み込みます…」ボタンをクリック。
d.ファイル選択ダイアログでさっき作ったフォルダを指定して「OK」ボタンをクリックする。

If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

まぁ、問題なかったらアイコンがアドレスバーの横に表示されて、拡張機能の情報が拡張機能のページに表示されます。次のスクリーンショットのように。
（結構直訳すみません。）

これは問題なかったんだろう・・・

それで次が本題だろう・・・
「Add code to the extension」に入ります。

In this step, you’ll make your extension do something besides just look good.
1.Edit manifest.json to add the following line:

…
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
…

「manifest.json」にこの行を追加する・・・
※現在「manifest.json」はこんなソース

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}

2.Inside your extension’s folder, create a text file called popup.html, and add the following code to it:

同じフォルダに「popup.html」っていう名前のファイルを作って
「CSS and JavaScript code for hello_world」をクリックして得たコードをコピペ

2.Return to the extensions management page, and click the Reload button to load the new version of the extension.
拡張機能のページに戻って、リロードボタンを押し機能拡張の「再読込する」ボタンを押す。

3.Click the extension’s icon. A popup should appear that displays the contents of popup.html.
その後、アドレスバー横の機能拡張アイコンを押すと「popup.html」のコンテンツが表示される・・・

It should look something like this:

If you don’t see the popup, try the instructions again, following them exactly. Don’t try loading an HTML file that isn’t in the extension’s folder – it won’t work!
Google翻訳で翻訳：あなたはポップアップを表示されない場合は、正確にそれらに続いて、作業手順をもう一度試してください。それは動作しません-拡張機能のフォルダにないHTMLファイルをロードしないでください！

・・・というわけで「Now What?」は現在どうですか？的な感じなので省略します。
「The hosting page, which tells you about options for distributing your extension」
という項目の「hosting」のリンク先に配布方法らしきものが・・・
これは後日・・・

2011年5月18日

jQueryでlightboxみたいな「prettyPhoto」を使ってみる

投稿者：isc_blog

前にお客様サイト上に「お問い合わせフォーム」を掲載する際に
prototype.js で「lightbox」を使ってビューっとウィンドウ出したことがあったなぁと思い今回「jQuery」で実装しなければならなかったため調べたところ
「prettyPhoto」というものがありました。

本家サイトをいろいろ見れば使い方がわかるんですが（なんだかすごいです。）
今回、「お問い合わせフォーム」として使用するため、下記のような規制がありました。
・下部に表示される「twitter」をはじめとするボタンが不要
・リンクではなくボタンで起動する

で、こんな感じで出来ました！
下記を「test.html」としました。
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery lightbox clone – prettyPhoto – by Stephane Caron</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.6");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javaScript">
function openInquiry() {
$.prettyPhoto.open(‘inquiry.html?iframe=true&width=500&height=500′,’お問い合わせフォーム’,’内容を入力してください。’);

}
</script>
</head>
<body>
<div id="main">
<h2>Iframe JavaScriptから起動</h2>
<input type="button" value="click" onclick="openInquiry();" />

構成は下記の通り
[html]
prettyPhoto
│ inquiry.html
│ result.html
│ test.html
│
├─css
│ prettyPhoto.css
│
├─images
│ │
│ ├─fullscreen
│ │ 1.jpg
│ │ 2.jpg
│ │ 3.jpg
│ │ 4.jpg
│ │ 5.jpg
│ │ 6.jpg
│ │ high.gif
│ │ huge.gif
│ │ wide.gif
│ │
│ ├─prettyPhoto
│ │ ├─dark_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─dark_square
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─default
│ │ │ default_thumb.png
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │ sprite_next.png
│ │ │ sprite_prev.png
│ │ │ sprite_x.png
│ │ │ sprite_y.png
│ │ │
│ │ ├─facebook
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPatternBottom.png
│ │ │ contentPatternLeft.png
│ │ │ contentPatternRight.png
│ │ │ contentPatternTop.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─light_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ └─light_square
│ │ btnNext.png
│ │ btnPrevious.png
│ │ default_thumbnail.gif
│ │ loader.gif
│ │ sprite.png
│ │
│ └─thumbnails
│ flash-logo.png
│ quicktime-logo.gif
│ t_1.jpg
│ t_2.jpg
│ t_3.jpg
│ t_4.jpg
│ t_5.jpg
│
└─js
jquery-1.3.2.min.js
jquery-1.4.4.min.js
jquery.prettyPhoto.js
[/html]
サンプルはこちらに置きました↓
http://ivankov.iscw.jp/prettyPhoto/test.html

↓↓↓

↓↓↓

アーカイブダウンロードはこちら
ダウンロード