Archive for the ‘javascript’ Category

Developer’s blog | Microsoftの翻訳APIを久しぶりに使ってみた(アクセストークン取得API実装編)の続きです。

ちょっと時間が空いてしまいましたが、いよいよ翻訳処理の実装をしていきたいと思います。

アクセストークン取得の実装(Javascript)

前回は、アクセストークンを取得するphpの処理を実装し、それをauth.phpという名前で保存しました。

まずは、これをJavascriptから呼び出してアクセストークンを取得する部分を実装します。
続きを読む »

Microsoftの翻訳APIを久しぶりに使ってみた(準備編)の続きです。

今回はアクセストークン取得API呼び出しの実装についてまとめてみたいと思います。

画面イメージは、gTranslatorのように翻訳前と翻訳後の文章を入出力するtextareaがあって、翻訳対象の言語と翻訳後の言語を選べるようにしたいと思います。後、翻訳実行のボタンがあるといいと思います。

少しだけスタイルをあててこんな感じにしてみました。

翻訳フォームのレイアウト
続きを読む »

ブログを書くときなどに、参考にさせてもらったサイトへのリンクを貼ることがよくありますが、管理者機能のエディタなどから真面目に入れていこうとすると、結構面倒くさかったりします。

リンクを挿入する画面

普段ブラウザはGoogle Chromeを使用していることが多いのですが、拡張機能などでブログに貼りつけるアンカータグがサクッと作れたらいいな~、と思いました。
ということで、見ているホームページのタイトルとURLから、アンカータグをクリップボードに保存するというChrome拡張機能を作ってみました。
続きを読む »

Webサイトの制作で、Material Designを採用する機会がありました。
スマホ向けサイトのお問い合わせフォームでMaterializeというCSS、JavaScriptのフレームワークを使用しましたので、導入から実装までの手順を簡単にまとめておきたいと思います。
Documentation – Materialize

bowerコマンドを利用してインストールしました。
※ 参考サイトはこちら↓
Bower入門(基礎編) – from scratch

Materializeをインストールするためのbowerコマンドをインストールするのに幾つかツールのインストールが必要になりました。

大まかな手順は以下のようになります。

  1. Homebrewのインストール
  2. node.jsのインストール
  3. bowerのインストール
  4. bowerの初期化
  5. bowerコマンドを実行してMaterializeをダウンロード
  6. フォームの実装

続きを読む »

昨日(2011年11月20日)、株式会社パソナテックさん主催のFacebookモバイルアプリ on AWSクラウド ~ハンズオン&ハッカソン~に参加してきました。

講師には、アマゾン データ サービス ジャパン株式会社のエバンジェリスト @KenTamagawaさん、株式会社gumiのCTO @horiuchiさんを迎え、そして、参加者には、クラスメソッド株式会社@sato_shiさんや、Androidアプリ toneconnectで有名な@kabayanさんがいたりして、蒼々たるメンバーの中開催されました。

今回のハッカソンはFacebookモバイルアプリということで、スマートフォン向けのNativeアプリでも作るのか?AWSを絡めて何をやるんだろう?という好奇心から、前日に思い立って参加登録しました。

実際は、Amazon EC2インスタンスを用いたモバイルWebアプリ開発が中心の内容でした。もちろん、Nativeアプリを作っても問題ないのでしょうけど、ちょっと盛りだくさん過ぎますよね(運営側も、参加者側も)。

ということで、ノープランで参加したわけなのですが、AWSとFacebookのJavaScript SDK – Facebook開発者での開発。これだけでも十分盛りだくさんで、全くの未経験だったとしたら、AWSのサインアップぐらいで終わってたかもしれません…
続きを読む »

HTMLとJavaScriptベースのAIRアプリやflash(swf)からJavaScriptを呼び出す方法は、いろいろと紹介されています。

例えば、、、

ActionScript 3.0 から JavaScript を呼び出すって話。 (InnerChild triumphs!!)
ExternalInterfaceクラスを利用すればいいみたいです。

ですが、Flash Builder(4.0よりFlex Builderから名称が変わりました)で作成した、MXMLとasファイルから構成されているようなAIRアプリから、JavaScriptを実行する方法はあまり見かけたことがありませんでした。

そこで、こんな方法を思いつきましたので、ご紹介したいと思います。

HTMLLoderクラスを使います。

こんな感じです。
続きを読む »

Google Japan Blog: Google Maps API でマネタイズを見て、Google Mapsに広告を載せられることを知りました。

これはいい!ということで、以前、iphone向け(現在は、Android、Firefox 3.5に対応済)に開発したWebアプリ、Stray Childの地図に載せたいと思います。

バックナンバーはこちら

Services – Google Maps API – Google Codeを参考に実装してみました、非常に簡単です。

	var adsManagerOptions = {
		maxAdsOnMap : 2,
		style: G_ADSMANAGER_STYLE_ADUNIT
	};

	adsManager = new GAdsManager(map, 'pub-XXXXXXXXXX', adsManagerOptions);
	adsManager.enable();

という数行を、初期化処理に入れればいいだけです。

ただ、これだと、
続きを読む »

httpsでホームページにアクセスすると、以下のような警告が出る場合があります。

このページにはセキュリティで保護されている項目と保護されていない項目が含まれます。

保護されていない項目を表示しますか?

これは、呼び出したhtmlの中にhttpのコンテンツが含まれているのが原因です。例えば、htmlはhttpsで呼び出しているのに、htmlの中に含まれる画像がhttpで呼び出されているような場合に起こったりします。

jQueryのライブラリのひとつにthickboxというのがあります。これをhttpsで利用すると、httpのコンテンツを表示しようとしているわけではないのに、IE6で同様の警告が出ます。

ie6
続きを読む »

flashcastでは、WordPressのテンプレートにオリジナルのthemeを使用しているのですが、プラグインとjQueryのライブラリ併用時に、ある現象が発生していました。

現象

Bloggerを使用していた頃、ソースの表示にはsyntaxhighlighter – Project Hosting on Google Codeを利用していました。

WordPressに移行してからはWordPress › SyntaxHighlighter Evolved « WordPress Pluginsというプラグインを利用しています。

また、以下のような表示をしたいので、
続きを読む »

flashcast:フリーで働くITエンジニア集団のブログ: Stray ChildをFirefox 3.5対応の続きです。

もともとStray Childは、

  • 拡大/縮小はiPhone、Androidの操作に任せていた。
  • 表示は極力、地図だけにしたい。

ということで、ZoomIn、ZoomOutのボタンはつけていませんでした。

ただ、PCのブラウザで見ると、拡大はダブルクリックでできるのですが、縮小ができません。これは不便。。。なので、最小限の拡大/縮小機能を実装します。

GSmallZoomControl

を使います。
続きを読む »