jQueryUIのsortableでtoArrayができた

jQueryUIのsortableでserializeはできるのにtoArrayができない。

と昨日言ってたけどできました(?)

console.log(配列)が表示されなくて困ってたけど、console.log(配列[添字])なら表示された！

なんでー！

サンプルだと配列の要素が全部でるはずなんだが…

うーん

まぁいっか笑

とりあえずsortしたあとの順番は得られそう！

jQueryUIのsortableでserializeはできるのにtoArrayができない

jQueryUIのsortableを使ったスマホアプリをmonaca/onsenUIで作成中。

sortableで並び替えた結果をpushpageした次のページで取得したい。

リファレンスによるとserializeを使うと並べ替えた後の順番のハッシュを作ってくれるらしい。
下記は引用。

"serialize"
並べ替えた順番で、Sortable アイテムに設定されたIDから、フォーム送信やajax送信できるようにシリアライズします。
例) 並べ替えた要素のIDが、 item-1, item-3, item-4, item-2 の場合
item=1&item=3&item=4&item=2

これはできた。
次はtoArrayで配列を作ってみる。

"toArray"
Sortable アイテムのIDの配列を返します。
例) Sortable アイテムのIDが、 item-1, item-3, item-4, item-2 の場合
["item-1", "item-3", "item-4", "item-2"]

あれ？できない？
console.logやってみても何も表示されない。

なんでだー。

monaca/onsenUIでjQueryUIのsortableを使って並び替えができるスマホアプリ

作りたいアプリはこんなの。

• 1枚目の画面：リストに項目を入力する画面。
• 2枚目の画面：1枚目で入力した項目を並べ替えることができる画面。
• 3枚目の画面：2枚目で並べ替えた順番を元に結果を表示する画面。

「順番を並び替える」という動きは、jQueryUIのsortableを使えばできるらしい！
Sortable | jQuery UI

さっそくサンプルを作って実験

サンプルとして1枚目の画面にsortableのオブジェクトを表示させてみる。
⇨できた！

monacaクラウドのシミュレータでsortableが動かせるかチェック
⇨できた！ぬるぬる動いてすごい！

手持ちのAndroidスマートフォン上のデバッガで動かしてみる
⇨動かない…ピクリとも。

解決！

いろいろ、調べているとこんなページを発見
【jQuery】iPad・iPnoneにも対応！ドラッグ＆ドロップで移動できるリストを作る方法 ｜ KLUTCHE

スマートフォンではtouchという操作になるためjQueryUIのsortableがそのままでは使えないとのこと。
で、「jQuery UI Touch Punch」を使えばできるらしい！
jQuery UI Touch Punch - Touch Event Support for jQuery UI

できたー！

自分のスマートフォンで自作のアプリが動いている！
1画面だけの無意味なアプリだけどすごくうれしい！
楽しいから頑張れそう！

このブログを始めるまでにやったこと

スマホアプリを作ってみたい！とは言ったものの何をすればいいのか。
なんとなく必要なものをリストアップ。

• 言語
• 開発マシン
• 開発環境（開発ソフトとか？）
• 参考書・参考Webサイト
• アプリの案
• モチベーション（長くて太いやつ）

言語

どうやらAndroidアプリはJava、iPhoneアプリはObjective-C(Swift)でできているらしい。
2つ言語を勉強するのも嫌だし、2つ作るのも嫌だしメンテナンスもしたくないので、なんとかできないか調べて、見つけたのがこのサイト。
Monaca - HTML5ハイブリッドアプリ開発プラットフォーム

HTML5とJavaScriptで作れば、Android/iOSどちらでも動くアプリが作れる！（と認識した）
このサイトには、Monacaクラウドというクラウド上の開発環境が用意されていて、ブラウザでコーディングできるしビルドまでやってくれる。
開発マシンのスペックが低くてもいいし、特別な開発環境も何も必要なし！
しかも基本プレイ無料！（一部有料）
HTML5とJavaScriptで作ることに決定！

開発マシン

なんとなく高性能なPCが必要だと思ってたけど、Monacaクラウドがやってくれるならいいや。とりあえず買わない。（と最初は思ってた）

開発環境

Monacaクラウドがやってくれるからいいや。

参考書

とりあえず勉強のためにポチったのが上記のサイトの運営会社が書いてるこの本。

クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ (Monaca公式ガイドブック)

アプリの案

バドミントンが大好きでスポーツ自体も好きなので、バドミントンとかスポーツに関するアプリを作る！3個くらい案がある。

モチベーション

これが一番難しそうなので、お金で解決することにした。
MacbookAir買ったった！
MonacaクラウドがあればiOSシミュレータの代わりにもなるから不要っぽいけど、やる気が出る気がするからいい。
お金をかけたことで逃げにくくしたつもり。

とりあえず準備としてはこのぐらいではじめるぞ！

スマホアプリ作ってみたい人がブログはじめました

ブログはじめました。

はじめまして、いっしです。

このブログはプログラミングをするにあたってぶつかった壁とか解決策とか、

その他の恨み辛みなどを備忘録として書いていくブログです。

Android/iOSスマートフォンアプリを作りたーーーい初心者が書いています。

よろしくお願いします。

多分すぐ飽きます。