1人で「Webアプリ＋ iOS & Android モバイルアプリ＋サーバー処理」を実装するための知見 - Qiita
1. はじめに - この記事について この記事は 「Ionic(Cordova)を利用したハイブリッドアプリ」と「mBaaSクラウドサービスのFirebase」を取り扱った記事となります。 Webアプリ&Mobileアプリ開発の検討をしている方を対象に記載しましたので参考になれば幸いです。 1.1 ざっくり記事の内容 「採用した技術」と「採用しなかった技術」の理由について Windows環境からの「iOSアプリのビルド」と「Appストアへのアップロード」について Appleの審査について 1.2 対象読者 この記事は以下の方を対象に記載しました。 何かしらの開発経験はあるけど、これからWeb＆モバイルのアプリ開発を新たに始める方 現状の開発環境を見直したい方 アプリを作りたい！でも人が足りない！ 2. どんなアプリか Web,iOS,Androidで動作して自動的に各端末でデータを同期する
スマホ向けWebページの検証を行う方法 - Qiita
スマホ向けサイトの表示確認、通信内容確認などの検証を行いたいときのやり方いろいろ。 スマホだけで確認する方法 view-source:を使用する ChromeブラウザやFirefoxで使える方法。URLの先頭にview-source:を加えてWebページを読み込むとhtmlソースを見ることができます。ユーザー辞書に「view-source:」と登録しておくとラクラク。 また、ブックマークレットからソースを表示することは無理でした。 iOSアプリを使用する iPhoneやiPadの場合はアプリをインストールすることでhtmlやJavaScriptのソースを確認することができる。「Srcfari」と「View Source」が人気な様子。 【iOS】ウェブサイトのソースを閲覧できる［Srcfari］はウェブデザイナーの方にお勧めの神アプリです。 - ONZE サイトのソースコードを確認できるア
iPhoneSafariのデバッグ方法｜iPhone｜モバイル／スマートフォン｜PHP & JavaScript Room
Windows環境のChromeでiPhoneSafariのデバッグをする Edge Inspect使用 2012/11/6 iOS5までは、端末のSafariに開発メニューがあり、そこからコンソールログなど、Webサイトのデバッグ表示ができたのですが、見当たらないと思ってたら、iOS6からはWebインスペクタに変わっていました。 weinreというリモートで動くWebサイトのデバッグツールが使われています。 Adobe Community: Forum: Edge Inspect どんなものか試してみましたので、ここではWindows環境のChromeでiPhoneSafariをデバッグする手順を簡単にご説明します。 必要なものはこちら。一度インストールしてしまえばあとは接続するだけなので簡単です。 iPhone：実機（WiFi接続）＋「Edge Inspect」アプリ Windows：
apple-touch-iconはbase64で指定できてJSで後書きできるって知ってた？ - Qiita
var appleTouchIcon = document.getElementById("appleTouchIcon"); var img1 = new Image(); img1.src = "appIcon1.png"; var img2 = new Image(); img2.src = "appIcon2.png"; /* ※実際にやるときは画像のロードを待たないとだめ */ // canvas作成 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var size = 152 canvas.width = size; canvas.height = size; ctx.drawImage(img1, 0, 0, size, size); ctx.drawImage
無料とは思えないほど自由度の高いアンケート作成ツール「Typeform」 | ライフハッカー・ジャパン
大量の人にアンケートや投票をしなければならないときにはウェブツール「Typeform」がおすすめです。直感的なインターフェイスで使いやすく、オプションも豊富な上に、無料（2013年9月14日現在）です。こういったツールはGoogleフォームなど他にもありますが、Typeformの強みはそのオプションの豊富さでしょう。 アンケート作成画面では、ドラッグ＆ドロップで20種類の質問形式が選べ、「必須項目にする」、「複数選択ができるようにする」といった設定も加えられます。アンケートが完成したらリンクを知らせて実施しましょう。集計結果は分かりやすい分析ページで見られます。 同ツールは今のところベータ版で、質問数や回答数が制限されています（20の質問項目のあるフォームが3つまで作成可能。回答数は5,000まで）。ただ、SNSでシェアさえすれば無制限になるそうです。日本語にも対応しているので、一度試して
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
iOS Safari(mobile Safari)には「ホーム画面に追加」機能があります。 「ホーム画面に追加」に追加したアイコンをタップして起動させた場合はmetaタグを追加でフルスクリーン表示が可能です。 描画エンジンはSafariの様なのですが通常（のSafari）とは違う表示が可能です。 ステータスバーもロケションバーもないアプリのようなフルスクリーン表示が可能です。 <meta name="viewport" content="width=device-width , initial-scale=1.0 , maximum-scale=1.0 , user-scalable=no"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-m
![Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c35180033ae4020a0e0c1b662cd0d153d918e3f/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2F_fb%2Ffb_inazumatv2.png)
Titanium? いいえ、Triainaです。 - mixi engineer blog
どうも、5ヶ月ぶりのブログ投稿です、佐野です。僕は2012年8月よりメッセージユニットに加わり、主にiPhone公式クライアントにおけるメッセージ機能の改修に携わっておりました。 mixi Touch(スマートフォンブラウザ版)では2012年10月より一部のユーザに向けてmixiメッセージにおけるリアルタイムコミュニケーションを実現するための新UIを提供しておりました。この機能が近いうちに mixi の iPhone版、Android 版 公式クライアントでも利用できるようになります。 (画面は開発中のイメージです) この新機能は Triaina という自社製のフレームワークによって、iPhone版・Android版共に、WEB版と共通の HTML+JS コードを利用して作られています。 こういうと「Triaina? PhoneGap や Titanium と何が違うの?」とか「Faceb
iPhoneやiPadでページを見ながらウェブデバッグが可能に！iOS 6から搭載された「Webインスペクタ」が超絶便利！ | gori.me（ゴリミー）
【img via iOS 5.1 Update. by MJ/TR (´･ω･)】 iPhoneやiPad向けにウェブ制作をしている人は知らないと損！ 最近頻繁にgori.meのチューニングを行なっているのだが、iPadで見ると崩れてしまう表示を長らく修正できずにいた。というのも、Macで見るとどのブラウザでも問題なく表示されていたから。 そんなところに先輩が「Safariのウェブインスペクタを使うと良いよ」と。基本的にGoogle Chromeで開発をしている僕としては「なぜわざわざSafari？」と思っていたが、iOS 6搭載端末を繋げるだけでSafariのウェブインスペクタはGoogle Chromeの何倍も便利になる。iOS 6からの新しい機能で、iPhoneやiPadでページを見ながら直接ウェブデバッグができるのだ！！ そもそも「Webインスペクタ」って何？ そもそもWebインス
JavaScriptでネイティブ並の速度を誇るゲームを開発·Ejecta MOONGIFT
EjectaはCanvasとオーディオ、JavaScriptをサポートしたフレームワークでネイティブ並のiOSアプリ（ゲーム）を開発できます。 iOSアプリでゲームを開発する際にはObjective-Cを使うのが基本でしょう。WebベースであったりTitaniumのようにJavaScriptのエンジンを経由するとそれだけ速度が低下してしまいます。しかしそんな限界に果敢に挑戦するフレームワークがEjectaです。 サンプルです。JavaScriptとは思えないほどスムーズな動きです。 指を動かすと線の太さ、明るさが変化します。 これくらい細くもできます。 線の数をぐっと減らしました。 Ejectaはゲームとアニメーションに特化したソフトウェアで、Canvasとオーディオだけで構成されています。JavaScriptは素のJavaScriptとして実行されます。これによりHTML5のゲームは多少
マップ問題ほぼ解決！ Web版Googleマップをフルスクリーン表示する方法が便利すぎてやばい - アップス-iPhoneの小技やiOS系ニュースを配信
マップ問題ほぼ解決！ Web版Googleマップをフルスクリーン表示する方法が便利すぎてやばい mixiチェック Tweet 2012年09月25日 カテゴリ:iphoneの小技 photo credit: daniel spils via photopin cc どうも@kuroji1987です。 使い物にならないと話題のiOS 6の地図アプリを、本格的に諦めることができる日がきたかもしれません。 W&R : Jazzと読書の日々で紹介されていたWeb版Googleマップを専用アプリのようにフルスクリーン表示する方法を使えば、ほとんど過去のマップアプリのようにGoogleマップを利用できるようになるのです！ これであの快適なマップ生活にもどれます！ ありがとうございます！ おっきい画面で地図が読める！ 今回紹介する方法を使うと、普通にWeb版で地図を開くよりも格段に大きな画面で閲覧できる
マルチタッチを使ったWebブラウザゲームの開発に·JSTouchController MOONGIFT
JSTouchControllerはiOSのMobile Safari上でマルチタッチを認識するライブラリ。 JSTouchControllerはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。iOSの面白さは言うに及ばないが、技術的に見た時に欠かせない要素の一つがマルチタッチシステムではないだろうか。複数の指による操作を同時に認識することで今までにないアクションが可能になる。 デモ 仮想的なゲームパッドを配置したり、複数のキャラクターを同時に扱うようなゲームもできる。音ゲーと言われるゲームにも欠かせない要素だ。そんなマルチタッチをWebブラウザ上で使えるようにするのがJSTouchControllerだ。 JSTouchControllerはMobile Safariで使えるマルチタッチシステムだ。利用できるのはiOSになる。Webブラウザで表示するとア
すげえ！WebブラウザからTitaniumアプリを開発、試せる·TiShadow MOONGIFT
TiShadowはWebブラウザからインタラクティブにTitaniumアプリケーションを開発できるソフトウェアです。 JavaScriptでiOS/Androidアプリを開発できるTitanium。そんなTitaniumを使ってインタラクティブにWebブラウザからアプリを開発できてしまうのがTiShadowです。 こちらはデスクトップのWebブラウザです。 次にアプリからサーバに接続します。これで準備完了です。 最初の表示です。何もありません。 こんな感じのコードを実行します。 アラートが出ました。 次に複雑なUIを実行します。 おお、ちゃんと描画されました。 デモ動画です。 TiShadowはrequireなどは使えないのでシンプルなアプリに限定されると思いますが、サーバに接続しているデバイス全てにデータが送信できるので複数をデバイスをまとめて試すと言ったこともできます。 TiShado
ローカル/リモートの写真に対応したiOS向けフォトビューワー·FGallery MOONGIFT
FGalleryはiOS用のフォトギャラリーアプリです。 iOSには写真を楽しむアプリがとても多いです。自分でもそんなアプリを作ってみたいと思ったならばFGalleryを参考にすると良いかもしれません。 メイン画面です。3つのタイプに分かれています。 まずローカル。アプリ内の写真を表示しています。 一覧のタイル表示です。 こちらはリモート。外部の写真をURL指定で表示します。 こちらはカスタム。ボタンをカスタマイズして設置しています。 FGalleryはシングルタップによるフルスクリーン化、ダブルタップでのズーム、ピンチによるズーム、キャプション表示、サムネイルグリッド表示、回転のサポート、ローカルまたはURLによる画像読み込み、タブバーのカスタマイズに対応しています。 FGalleryはObjective-C製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
jQuery Mobileを使ったスマートフォン向けHTML5フレームワーク·The-M-Project MOONGIFT
The-M-ProjectはiOSやAndroidといったスマートフォン向けに特化したWebアプリケーションフレームワーク。 The-M-ProjectはJavaScript/HTML5製のオープンソース・ソフトウェア。Webアプリケーションが本格的に取り入れられるようになっている。AjaxなどによるWebアプリケーションの操作性向上に加えて、JavaScriptで実現しうる機能が増えていることに要因があるだろう。 サンプルのTodoアプリ そしてもう一つがHTML5の存在だ。PCブラウザ向けにはまだ全面採用は難しいものの、スマートフォンであれば採用できるだろう。そんなスマートフォン向けのWebアプリケーションを開発する際に使えるフレームワークがThe-M-Projectだ。 The-M-ProjectはHTML5を採用したWebアプリケーションフレームワークだ。iOSはもちろん、Andr
iOS向けWebアプリケーションを開発する際に使いたいHTMLフレームワーク·appML MOONGIFT
appMLはjQTouchをはじめとするHTML5/JavaScriptライブラリを組み合わせたiOSをはじめとするスマートフォン向けHTMLフレームワーク。 appMLはHTML5/jQuery/JavaScript製のオープンソース・ソフトウェア。多様なWebブラウザが乱立するデスクトップの世界と違って、スマートフォンの世界はとてもシンプルだ。ほとんどがWebKitで統一されている。WebKit自身はオープンソースであり、開発者としてはとてもやりやすい。 iPhone向け 今後、ネットアクセスデバイスはデスクトップからモバイルへ移っていく。そんな時代の中でスマートフォン向けWebアプリケーションを開発するのに使えるフレームワークがappMLだ。 appMLはjQTouchやiScrollをベースに開発されているスマートフォン、iPad向けのフレームワークだ。PhoneGapの公式ツール
ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド
■iOS（iPhone OS） iOS（3.0以前は「iPhone OS」）は、アップルがiPhoneなどの小型端末用に開発した専用OSです。初代iPhoneに1.0が搭載されたあと、新モデルの発表に合わせてバージョンを重ねています（iPhone 4にはiOS 4が搭載）。iPhone 3G以降はOSのバージョンアップができるようになり、最新版のiOS4にも対応しています。 ■iPhone標準ブラウザー「Safari」 iPhoneには標準ブラウザーとして「Safari」が搭載されています。SafariはもともとアップルがMac OS X向けに開発したWebブラウザーで、Windows版も無償で配布されています。基本的な表示能力はiPhone版もデスクトップ版もほぼ同じですが、iPhone版にはいくつの制限があるため、「Mobile Safari」などと呼んで区別することもあります。 Sa
ウェブ業界で起業したいならMarcoを目指そう | quipped
Marco Armentという人をご存知だろうか？ Instapaperという「ブックマークして後で読む」アプリの作者として知られており、アメリカで大人気のブログサービスTumblrの共同創業者でもある。彼は2010年にTumblrを離れ、今はInstapaper一本にしぼって仕事をしている。主な収入源は$4.99のiOS用Instapaperアプリで1、アプリのダウンロード数が常時ランクインしていることを考えると、十分生活できるだけの額だろう。 今日のお話は至極単純なもので、ウェブ業界で起業したい人たちは、Mark ZuckerbergでもSteve JobsでもなくてMarco Armentをお手本にするべきだという話だ。ここですでに納得なら、残りを読む必要はない。 ぼくがMarcoをお手本とするべきだというには、3つの理由がある。 Marcoがウェブプロダクト制作に関して平均的に能力
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
