OnsenUIを使って、Flickrアプリを5分で作ろう
この記事は、英語版アシアルブログの翻訳記事です。 （原文はこちら） ============================== この記事では、Flickr APIを利用して写真を表示するアプリを、HTML5 モバイル UIフレームワーク・OnsenUIを利用して作成します。 さらに、ボタンのスピナーアニメーションを使うことで、アプリに生き生きとした見た目を与えます。 今回作成するのは以下のアプリです。実際に動くので、触ってみてください。 1. プロジェクトを作成する 1. Monacaのダッシュボードで、「新しいプロジェクト」をクリックします。 2. 「Onsen UI最小限のテンプレート」を選択します。 プロジェクトの名前を「Flickr」とし、IDEを起動します。 OnsenUI最小限のテンプレートには、page1.htmlとpage2.htmlを行き来するナビゲーターコンポーネント
Ajaxによるmultipart/postでの画像ファイルアップロード
モバイルアプリでは、サーバーと連動して動作するものが多くみられます。 ハイブリッドアプリでこうしたアプリを作る場合は、Ajaxで実現するのが一般的だと思いますので、そのやり方について説明します。 追記：Android 2.3系およびそれ以前のAndroidは、FormDataオブジェクトが未定義のため、この記事の方法は利用出来ません。ご注意下さい。 追記２：Android 4.4では、Formからのファイル選択自体ができないため、この記事の方法は利用出来ません。(4.4.2で確認。今後のバージョンアップ出来るようになるかは不明です） formタグを使わない手段については、こちら サーバー側の実装 まずは、サーバー側の機能の実装です。 ここでは、普通にブラウザからもアップロード出来るような作りを考えます。実装はphpですが、他の言語でも基本的に同じように作れると思います。 /uploader
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
PHP on GAE (Google App Engine) を試してみました
こんにちは、中川です。 今回は、ちょっとsymfonyからは離れてGoogle App Engine (以下GAE)上でのPHPを試してみました。 社内の別のメンバーがHelloWorldまでは試していたり、いろいろな記事等で動くというのは知っていたのですが、 どの程度既存のコードが使えるものかといじってみました。 「PHP on GAE」の環境については、「PHPも使える！ Google App Engine for Java（前編）|CodeZine ( http://codezine.jp/article/detail/3948 ) 」のままで すんなり動作するところまで30分程度でいけました。 で、ちょっと試してみたのですが、なかなかこれが、、、 まずは、phpinfo 。 http://asialphptest.appspot.com/info.php <h2>extension
MacPortsの基本的な使い方とコマンド
Macに移行して2ヶ月になりそうな今日この頃、ようやくMacになれてきた熊谷です。こんにちは。 MacというかOSX上で開発を行う上で欠かせないものにMacPortsがあります。前回もちょっと触れたのですが、今回はこれについてもうちょっと触れたいたいと思います。 MacPortsとはOSXで利用可能なパッケージ管理システムで、これを使うことによりOSX上でより良いUNIX生活を送ることができるようになります。私自身、まだMacPortsを使い始めたばかりで勉強中なんですが、それを忘れないようにするためにもメモ書きします。 まず、MacPortsをインストールするためにはOSXの開発環境であるXcode Toolsをインストールしておく必要があります。Xcode ToolsはMacに付属しているDVDかDeveloper Connectionからダウンロードしてインストールしておきます。で、
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。 追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)> 昨日はグリーさんのオープンソース勉強会に参加してきました。 今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。 勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。 モバイルをやっているといつも面倒なのは、テンプレートの扱いです。 そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。 とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。 さてさてそんなDo
絵文字データベースと相互変換マッピングデータベースのJSONファイルを公開します。
こんにちは、亀本です。 === 追記：みなさんいっぱいはてブしてくれたようなので、せっかくなのでちょっと宣伝です（＾＾； この絵文字データベースは、携帯専用イベント支援サイト「あつまろ☆ねっと」というサイトの、メーリングリスト連動型の掲示板を構築していく過程で出来上がったものです。 「あつまろ☆ねっと」は現在ベータ版ですが、ぜひ利用してやってください<(｡_｡)>ﾍﾟｺﾘ === 携帯サイト作成の際に頭を悩ます最初の関門が、絵文字の取り扱いだと思います。 各社とも絵文字のデータ形式や相互変換表などを公開してくれていますが、取り扱いやすいデータ形式で統一的にまとめてある情報がなかなか存在しなかったりして、車輪の再発明が非常に多い分野ではないかな、という気がしました。 そこで、どうせなら利用しやすいようにきっちり整理しようと思い、各種文字コードや表示形式を統括的に扱う絵文字データと、それらの絵
携帯でGoogleMapを手軽に表示するPHPクラス : アシアルブログ
<?php //携帯でGoogleMapの画像をプリントするクラス class GoogleMobileMapView{ //取得URLとクエリを保持する変数 private $geturl = 'http://maps.google.com/mapprint?tstyp=4'; private $query = ""; private $image_format = "1"; private $type = array("1"=>"gif","2"=>"png","3"=>"jpeg"); //画像を取得するためのURLをセットするメソッド public function setUrl($latitude,$longitude,$settings,$points = null) { //中心の位置がない場合はfalseを返す if( $latitude == "" || $longitu
GoogleMapの地図上に表示したラインの距離を求める方法
こんにちは。笹亀です。 最近は、冬の寒さと乾燥した場所に弱いもので、 もっぱら体調がよくない日々をおくっています。 特に寒さには弱く、社内で一人だけ上着を着た状態で日々の業務をしていることが多く、軽く浮いております(;´▽｀A“ 今回は、以前にGoogleMapを使ったときに行ったことを紹介したいと思います。 地図を表示したいときによく使用されるGoogleMapですが、地図を表示するだけではなく、GoogleMapの地図上にライン（線）を引くこともできます。 しかし、その引いたラインの距離を求めるにはGoogleMapの標準メソッドでは距離を取得するメソッドは用意されていません。 そこで、複数の線の緯度経度情報からラインの距離を算出する方法を紹介します。 下記のソースは、実際にGoogleMap上にラインを引く処理とラインの距離を算出することができる状態のサンプルソースになります。ところ
jQueryで長いURLやメールアドレスを折り返して表示する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>linkwrapper.jsのサンプル</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.linkwrapper-1.0.3.js">
CSSでブラウザごとに自動改行を試してみました
こんばんは、笹亀です。 GWはあっというまに終わってしまい、 今日から仕事が始まっている方も多いとおもいます。 GW中の4月30日に新宿でうろうろしていたら、 アルタ前でavrilの新宿ゲリラライブにたまたま遭遇したことが一番の思い出でした。 本物はお人形みたいでした＾＾ さて、本日はCSSでテーブルなどのサイズに合わせて、 自動改行を行わせるものをパターンで比べてみました。 今回、使用したブラウザはIE6.0とFirefox2.0系です。 まずは、日本語（2バイト）に関しては、テーブルなどのサイズに合わせて自動で改行が行われるかを確認します。 下記のようにテスト用のHTMLを作成しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Cont
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
