このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2016.04.22

【保存版】iPhoneだけで web開発できる 無料アプリをまとめてみました。2016年版

写真 2016-04-17 23 07 16

どもです。

依然、熊本では地震が続いておりますね。。

この度の大地震で被害に遭われた皆様、心からお見舞い申し上げます。

私の家族も全員九州にいて、妻と子供も丁度帰省していた時期もあって、私以外の家族が今回の地震を体験しております。

 

全員無事で何よりだったのですが、熊本には一刻も早い復旧を祈るばかりです。

 

話は変わりまして、iPhoneの進化は本当にめまぐるしいものですね。

ゲームをとってみても、グラフィックも凄いし、リアルタイムのバトルも行えたりで。

コンシューマーゲームに負けない勢いですね。

そんなiPhoneをゲームだけで終わらすのはもったいない。

 

毎日の通勤時間の1時間をゲームではなく、web開発してみませんか?

そんなわけで、

今回は、久々の投稿ということで、iPhoneだけで web開発できるアプリをまとめてみました。

 

何か参考になればと思います。

 

Web開発

まずは、web開発を行える(エディタとして使える)Appのご紹介を。

JavaScript Anywhere

開発: Tatsuya Tobioka

スクリーンショット 2016-04-22 4.14.39

AppStoreBadge

無料

 

まずは、「JavaScript Anywhere」 からご紹介。

結論から言いますと、このAppひとつでHTML、CSS、JavaScriptを作成する事ができますので、

これひとつでWebサイト作成も可能なので、これでいいじゃん。

って言ったところです。

UIもとってもシンプル。

写真 2016-04-17 23 01 54

右上の「+」ボタンで新規ファイルの作成が行えます。

最初からあるサンプルがリストで表示されていますので、クリックするとこのように

ソースが表示します。

写真 2016-04-17 23 02 03

ソースをタッチして編集も楽々行えます。

右上の「▶︎」ボタンで実行して表示の確認も行えます。

写真 2016-04-17 23 02 13

その他、ドロップボックスと連携も可能なので、

連携後は作成ファイルをそのままドロップボックスへと保存する事が出来ます。

写真 2016-04-17 23 02 24

いやー便利。

このアプリは入れておき事必須なアプリですね。

 

Espresso HTML

By Fornace™

スクリーンショット 2016-04-22 10.30.54

AppStoreBadge

無料

 

続いては、Mac用テキストエディタで有名な「Espresso」のiPhoneApp版となります。

iPhoneアプリの方もオシャレに仕上がっております。

写真 2016-04-17 23 04 02

用意されているテンプレートも豊富で、

jQueryやFoundationなんかも利用出来ます。

 

こちらが、編集画面。

補完機能なんかもあってとても親切なAppですね。
ですが。

保存する機能がない!!

アプリ内には保存されるのですが、

そこからどうすれば..

せめて、ドロップボックスと連携すれば、

かなり使えるアプリかと思いました。

Javascript-1

開発: Hirokazu Hasegawa

スクリーンショット 2016-04-22 10.33.47

AppStoreBadge

無料

 

続いて「JavaScript-1」。

JavaScript-1という名前から、JavaScriptのみなのかと思いがちですが、HTML、CSSも作成する事が出来ます。

写真 2016-04-17 23 03 45

最初からサンプルも用意されていて、リストをクリックすると、このようにソースが展開されます。

写真 2016-04-22 2 14 57

 

RUN」で表示の確認も出来ます。

こちらは、作成したファイルはメールに添付して送るみたいですね。

下の「Mail」をクリックすると「メールアプリ」が起ちあがり、ファイルが添付されております。

写真 2016-04-18 5 44 26

なかなか使い勝手も良く、良いアプリではないでしぃうか。

プレビュー画面

写真 2016-04-17 23 03 54

 

 

PHP Programming Language

開発: Yauheni Shauchenka

スクリーンショット 2016-04-22 10.38.24

AppStoreBadge

無料

 

続いて、「PHP」のアプリ。

iPhoneでPHPを書けるって、何か凄くないですか!?

こちらと同様、PHP以外にも「Ruby」や「SQL」などがあるのですが、

開発者が異なるのですが、UIや機能は同様の形となっております。
写真 2016-04-17 23 04 48
作成したソースは「RUN」ボタンで実行する事が出来ます。

また、こちらも「javaScript-1」同様、

作成したファイルはメールで送る形ですね。

sendボタンを押すとメールアプリが起ち上り、ファイルが添付されております。

Ruby Programming Language

開発: Megakey Trans

スクリーンショット 2016-04-22 10.41.28

AppStoreBadge

無料

 

こちらも「PHP Programming Language」同様ですね。

RubyをiPhoneで書く事が出来ます!

写真 2016-04-17 23 04 54

SQL Programming Language

開発: Megakey Trans

スクリーンショット 2016-04-22 10.44.33

AppStoreBadge

無料

 

こちらも「PHP Programming Language」同様ですね。

SQLも書けるのかー!

殆ど書く機会もなかったりしますが。

写真 2016-04-17 23 04 59

デバック

続いて、デバックが行えるアプリです。

web上のソースはどうなっているのかな。。

と、思った時にこれらのアプリを使って調べる事が出来ます。

Javascript Console

開発: YumeWorks

スクリーンショット 2016-04-22 10.48.43

AppStoreBadge

無料

 

まずは「Javascript Console」から。

ソース表示

写真 2016-04-17 23 05 54

App開くとこのようにGoogle検索が表示します。

ソースを確認したいページなどを検索しましょう。

右上のアイコンをタップすると、このようにメニューが表示します。

写真 2016-04-17 23 06 19

Console」は、Google Chromeのwebインスペクタのコンソールみたいな扱いができて、

ソース確認したい場合は「Source」を選択するとソースの確認が行えます。

そのほかにもjQueryをInjectできたり、広告を非表示にしたりもできますね。

何かと重宝しそうなApp。

 

ScriptBrowser - ソースコード閲覧&テスト

開発: UNI-LABO Co.,Ltd.

スクリーンショット 2016-04-22 10.50.36

AppStoreBadge

無料

 

こちらも、「JS Console」とほぼほぼ同じ感じですね。

もちろんですが、若干UIが異なったりします。

写真 2016-04-17 23 04 11

 

どちらもiPhone6にはきちんと対応していないようで、画面が狭いです。

Javascript Console」の方が機能もありますので、使用するのであれば、「Javascript Console」の方かな。

といった印象です。

写真 2016-04-22 2 20 23

 

HTMLViewer

開発: RichTech

スクリーンショット 2016-04-22 10.53.06

AppStoreBadge

無料

 

HTML Viewer」も同様にソースの確認が行えます。

写真 2016-04-17 23 06 35

ソースを表示したところになります。

iPhone6に対応している様で、画面いっぱいに表示いたします。

写真 2016-04-22 2 24 37

このアプリが他と違う点は、どうやらファイルとして保存できるみたいです。

サンプルとして、最初から「HelloWorld.html」のファイルが存在していて

写真 2016-04-22 2 28 47

こちらのプレビューとソースの確認が行えます。

でも、どうやってファイルを保存していくのだろう。。

iCloudと連携できるみたいなので、そこから保存するのでしょうね。

 

FTP アプリ

上記で紹介したアプリを使えば、ソースファイルの作成が行えるし、デバックもできる。

では次にしたいことは、サーバーにUPすることではないでしょうか?

というわけで、サーバーにファイルをアップできる「FTPアプリ」の方をまとめてみました。

 

FTPManager Free

開発: Steven Zhang

スクリーンショット 2016-04-22 10.56.15

AppStoreBadge

無料

 

まずは、「FTPManager Free」から。

シンプル且つ、洗練されたUIで使いかっても良く、接続も簡単だったのですが、残念なことが一つありました。。。

鍵認証が実装されていないという。。。

 

写真 2016-04-17 23 03 17

シンプルなUI。

サーバーの設定画面は綺麗な感じで簡単に設定が行えます。

SFTP(SSH File Transfer Protocol) のタブをあってSFTP接続できるのですが、

どうやらパスワードのみのようです。

SSHキーを用いた鍵認証はどうやら実装されていない様子。

写真 2016-04-18 0 43 19

パスワード認証で使うのであれば、特に不満はないかと思います。

写真 2016-04-18 4 41 56

 

 

FTP精霊

開発: ujweng

スクリーンショット 2016-04-22 10.57.31

AppStoreBadge

無料

 

続いて「FTP精霊」。

何かと良いという記事もちょこちょこみましたが、扱った印象では、UIがわかりずらい。。

遷移がわかりずらい。。

あと、広告も入っているので、ちょっと気になりますね。

写真 2016-04-17 23 04 34

フッター部分にアイコンが並んでいますが、まず迷います。

接続は難なく行えるのですが、

写真 2016-04-18 4 42 18

SFTP(SSH File Transfer Protocol)でSSHキーを用いて鍵認証接続したいのですが、

どうやらそのような機構が見つからない。。

写真 2016-04-21 0 08 10

パスワードのみの接続で使う分には問題ないでしょう。

 

FTP オンコネクトFree - FTP SFTP FTPS FTPES Client ( FTP / Web Server)

開発: HAK KYOON KIM

スクリーンショット 2016-04-22 10.58.35

AppStoreBadge

無料

 

続いて、「FTP オンコネクト Free」。

こちらも通常の接続は難なく行えるかと思います。

若干、背景などのデザインが古く、UI等もごちゃついてるイメージがありますね。

写真 2016-04-17 23 05 16

接続したところ、リストはこのような感じで表示します。

写真 2016-04-18 4 42 33

Dropboxと連携を行うことによって、「マイドキュメント」にファイルを格納することができます。

写真 2016-04-18 3 54 48

SFTP(SSH File Transfer Protocol)でSSHキーを用いて鍵認証接続を試みてみます。

どうやら、「マイドキュメント」の方にファイルを置いて、「Add to private key list」を選択すると、

SSHキーを登録できます。

との事を書いていましたので、やってみたところ、

写真 2016-04-18 3 58 45

「Error」

写真 2016-04-18 5 02 27

何度行っても「Error」

うーん。結局SFTPでは、接続できず。

途中で諦めました。

外出でも使えるFTP - FTP On The Go

開発: Headlight Software, Inc.

スクリーンショット 2016-04-22 11.42.37

AppStoreBadge

¥ 720

 

続いて、「FTP On The Go」

こちらは無料ではないのですが、なにかと評判も良い感じなので掲載します。

こちらもシンプルで、UIが洗練されている印象。

webとかの評価もいい感じでどうやら使えそうな雰囲気。

 

HowToやTipsなどのYoutubeのリンクが貼られていて、親切な感じになっております。

写真 2016-04-18 4 14 55

こちらも、Dropboxと連携を行うことによって、Dropbox内のファイルにアクセスすることができます。

写真 2016-04-18 4 18 02

こちらもSFTP(SSH File Transfer Protocol)でSSHキーを用いて鍵認証接続を試みてみます。

App内のHELPに書かれている感じだと、どうやら、「PrivateKeys」というフォルダを作成し、そこにPrivateKeyを格納しましょう。

との事なので、早速「PrivateKeys」というフォルダを作成しようとすると、

 

写真 2016-04-18 5 07 55

課金してね。

って言われるーー。

どうやらフォルダを作成するにはアップグレードが必要の様子。

うーん。断念します。

 

FTP Client Lite

開発: LessIsMore Development

スクリーンショット 2016-04-22 11.17.22

AppStoreBadge

無料

 

続いて、「FTP Client Lite」です。

こちらも比較的使いやすい感じですね。

様々な接続にも対応しております。

こちらもSFTP(SSH File Transfer Protocol)でSSHキーを用いて鍵認証接続を試みてみます。

鍵のアイコンをクリックすると、

写真 2016-04-21 10 12 51

このようなHELPが表示します。

ふむふむ。

写真 2016-04-21 10 12 58

こちらもDropboxと連携を行うことによって、ファイルを扱う事ができますので連携。

写真 2016-04-18 5 15 34

「.PrivateKeys」というフォルダを作成し、

 

写真 2016-04-18 5 16 39

その中にprivateKeyを格納します。

写真 2016-04-18 5 16 45

Connecting...

 

永遠とConnecting...となり接続できる雰囲気がなかったので

こちらも途中で諦めました。

 

 

iTransfer - FTP, SFTP, FTPS, Cloud Drive Manager

開発: ComcSoft

スクリーンショット 2016-04-22 11.19.30

AppStoreBadge

無料

 

FTPアプリの最後に「iTransfer」の紹介を。

結論から言いますと、とりあえずFTPアプリはこれにしました。

アイコンは可愛い感じでできていますが、「FTPOnTheGo」や「FTPManager Free」みたいまで

UIに関しては洗練されてはいなく、広告表示もされてごちゃついている印象ではありますが、

何しろSFTP(SSH File Transfer Protocol)でSSHキーを用いて鍵認証接続ができた。

ということで、FTPアプリはこちらを使うことにしました。

写真 2016-04-18 4 45 29

サーバー設定画面も比較的シンプルですね。

バファリンの広告が若干気になりますが。w

写真 2016-04-22 2 35 20

AppのLocalにもファイルを置くことが出来ます。

Dropboxと連携して、Local FilesにSSHキーを格納することによって、

使用するSSHを選択することができます。

写真 2016-04-18 4 47 07

その他にも「BOX」であったりと様々なクラウドサービスと連携可能です。

ローカルファイルのリストはこんな感じになっております。

写真 2016-04-18 4 46 56

SFTP(SSH File Transfer Protocol)でSSHキーを用いて鍵認証接続を行う際は、

サーバー設定画面で「Use Private Key」タブを選択し、「Select a Key File」でSSHキーファイルを選択できます。

写真 2016-04-22 2 39 08

とりあえず、無料で鍵認証接続が行えるということでこちらのアプリを使うことにしました。

 

SSH接続

FTPアプリだけでなく、SSH接続してコマンド叩きたい!

って方はこれらのアプリを使うと良いでしょう。

Prompt 2 - SSH クライアント・コンソール・ターミナル

開発: Panic, Inc.

スクリーンショット 2016-04-22 11.22.14

AppStoreBadge

¥960

 

公式ページ

https://panic.com/jp/prompt/

 

まずは「Prompt2」から。

こちらも有料ですが、良い感じなので掲載。

こちらは、Macエディタの「Coda」などを販売しているPanic incから発売されているアプリとなります。

有料ということもあって、UIも綺麗な感じで機能も申し分ない感じにできております。

写真 2016-04-17 23 02 38

 

写真 2016-04-17 23 02 48

鍵アイコンをタップすると、鍵認証を追加できます。

新規の場合は「鍵認証を生成」することも可能だし、コピーアンドペーストで追加も行えます。

写真 2016-04-22 2 50 17

追加した場合、鍵認証リストに追加され選択できます。

また、1Passwordとも連携が可能というツワモノ。

「認証方法方」って日本語変ですね。方が多い。

写真 2016-04-22 2 50 25

 

Serverauditor - SSH Shell / Console / Terminal

開発: Crystalnix

スクリーンショット 2016-04-22 11.23.56

AppStoreBadge

無料

 

続いて「Serverauditor」のご紹介。

最初に開くと、かわいい感じでホストを追加しましょう。

的なナビが表示します。

写真 2016-04-17 23 03 24

サイドメニューはこのような感じとなってます。

 

写真 2016-04-22 2 57 32

Quick Connectで鍵アイコンクリックして鍵を追加します。

写真 2016-04-22 2 58 38

リストにある鍵を選択するか、新たに追加するか。

右上のアイコンで以下のメニューが開きます。

写真 2016-04-22 2 59 41

New Keyを選択すると以下のような表示になります。

こちらもコピーアンドペーストに対応しておりますね。

写真 2016-04-22 2 59 37

 

iTerminal - SSH Telnet Client

開発: ComcSoft

スクリーンショット 2016-04-22 11.25.00

AppStoreBadge

無料

 

最後に「iTerminal」を。

今までと違ってこちらはちょっとダークな感じですね。

写真 2016-04-17 23 03 12

リストの「SSH」を選択するとこのような感じになっております。
写真 2016-04-22 3 11 00
SSHキーの追加は右上のメニューをタップして歯車アイコンをタップ。

写真 2016-04-22 3 12 12
「Settings」からKey Management からKey Fileの追加を行います。

写真 2016-04-22 3 11 49
こちらもコピーアンドペーストで追加が可能となっているようですね。

さらに「iCloud」からSSHキーをimportできるようです。
写真 2016-04-22 3 11 57

MySQL QueryDB クライアント

開発: Excelsis Consulting

スクリーンショット 2016-04-22 11.26.27

AppStoreBadge

無料

 

おまけとして、「MySql QueryDBクライアント」を。

こちらも便利なアプリで、稼働しているサーバーのDBにSQLクエリが投げれるという代物。
写真 2016-04-17 23 05 29
サンプルのクエリを実行してみたところ。

写真 2016-04-22 3 10 10

接続設定はこのような感じですね。

写真 2016-04-22 3 09 58

こちらでクエリ文の作成を行います。

写真 2016-04-22 3 10 18

 

 

プロトタイピングツール

最後にプロトタイピングツールアプリのご紹介

Prott - 高速プロトタイピングツール

開発: Goodpatch Inc.

スクリーンショット 2016-04-22 11.28.37

AppStoreBadge

無料

 

公式ページ

https://prottapp.com/ja/

こちらは、もうすっかり有名なGoodpatchさんの代表的なアプリの「Prott

画像をつなげて、簡単にプロトタイプがサクッと作成できるツワモノアプリ。

未インストールの方は是非。

写真 2016-04-17 23 35 35

写真 2016-04-17 23 35 40

POP - Prototyping on Paper

開発: Woomoo

スクリーンショット 2016-04-22 11.29.52

AppStoreBadge

無料

 

POPは、紙に描いたスケッチから、iPhone や iPad で動く実用的なプロトタイプをサクッと作れちゃいます。

こちらもオススメのアプリですね。

未インストールの方は是非使ってみてください。

写真 2016-04-17 23 03 02

と、意外と長々な記事となってしまいました。

時間も予想外に結構かかってしまいましたw

何かと使う機会もあるかもしれませんので、ブックマークしていただけるとこれ幸いであります。

これらのアプリをインストールして、通勤時間または旅行先などで、

iPhoneだけの究極のノマドライフを過ごすのもよいのではないでしょうか。

ではでは、ありがとうございました mm

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。