はじめに

今年は仕事で過去に作ったアプリを元に、新しい案件にてアプリを作り直しました。
その際、一部を除いてライブラリ等のバージョンをあげました。
このアプリを作った当初、OnsenUIは1系で、OnsenUI2系はrc版の段階でした。
1系を使うか2系を使うか迷ったものの、間もなく2系になるからとrc版を入れていました。
その後アプリ本番リリースまで正式版が出ることがなく、
仮に出ていたとしてもライブラリの正式版が出たからという理由で上げられるわけもなく、
正式版にあげたかったなーというのが心残りになっていました。

この度、OnsenUIを正式リリース版に上げられて、
その際動かなかった部分を記録しておこうと思います。

【過去アプリ】
Android: 4.4.2
AngularJS: v1.5.7
OnsenUI: v2.0.0-rc.15

↓↓

【新アプリ】
Android: 7.0.0
AngularJS: v1.6.4
OnsenUI: v2.3.2

変更内容

今となっては時間が空いてよく覚えてないけれど、過去のソースとの差分から変更してる箇所を抽出しました。

`ons-sliding-menu` が使えなくなった

ons-sliding-menuがrc版ではまだ使えていたのですが、使えなくなっていたのでons-splitterに変更しました。

<ons-sliding-menu swipeable="false" main-page="views/login.html" menu-page="views/menu.html" max-slide-distance="260px" type="overlay" var="menu" side="right">
</ons-sliding-menu>

↓↓

<ons-splitter var="menu">
    <ons-splitter-side side="right" width="300px" animation="overlay" page="views/menu.html" collapse>
    </ons-splitter-side>
    <ons-splitter-content page="views/login.html"></ons-splitter-content>
</ons-splitter>

メインページの表示方法が変わった

こちらもons-sliding-menu絡みですが、変わってたので一緒に変えました。

menu.setMainPage('views/search.html', {closeMenu: true});

↓↓

menu.content.load('views/search.html', {closeMenu: true}).then(function(){});

メニューの表示／非表示方法が変わった

こちらも同じくons-sliding-menu絡み。
toggleを使うと、閉じてるときはメニューが開いて、メニューが開いているときは閉じてくれてたのですが変わったようなので、
開くときは以下を使って、

<ons-toolbar-button ng-click="menu.toggle()">
    メニュー
</ons-toolbar-button>

↓↓

<ons-toolbar-button ng-click="menu.right.open()">
    メニュー
</ons-toolbar-button>

閉じるときは以下を使うようにしました。

<ons-list-item tappable ng-click="menu.closeMenu(sample())">
    <label>ラベル</label>
</ons-list-item>

↓↓

<ons-list-item tappable ng-click="menu.right.close({callback: sample})">
    <label>ラベル</label>
</ons-list-item>

現在ページの取り方が変わった

これは何か他に方法がありそうって感じなのですが、
現在メインページとして開いてるページのファイルパスを取得しています。
取れなくなったのでどうにか探して変えました。

var currentPage = menu._currentPageUrl;

↓↓

var currentPage = menu._element[0].children[1]._page;

HTTPリクエストの方法が変わった

これはAngularJS側の変更ですが、
どうダメだったかは忘れましたがダメだったので変えてます。

$http.post("url", data, config)
    .success(function(data, status, headers, config) {
        // 何か処理
    })
    .error(function(data, status, headers, config) {
        // 何か処理
    });

↓↓

$http.post("url", data, config)
    .then(function(data, status, headers, config) {
        // 何か処理
    }, function(data, status, headers, config) {
        // 何か処理
    });

`ons-scroller` が使えなくなった

ons-scrollerタグの間に挟んだものがスクロールできるというのがあったのですが、無くなったようだったので消して別の方法にしました。
ディレクティブを使ってなんとかしているようですが、自分が直してないのと該当ソースが多いので割愛します。

<ons-scroller>
    <!-- なにかしら -->
</ons-scroller>

おわりに

ライブラリのバージョンは別の案件などでどうせ全部テストし直すから…とかじゃないと
なかなかよっぽどのことが無いと上げられないし今回上げられてよかったです。
もっと色々動かなくなるかなぁと思っていたのですが、案外そこまでの影響も無かったです。
1系から上げてたらもっと大変だっただろうなぁと思います。
2系を入れててよかった。

ただ、Cordova自体のバージョンを上げられてなくて、
上げると起動しなくなると聞いてるので、次があったらCordovaも上げたい…。
AngularJS自体も、脱1系をするか別のにものに移るかしたいなと思うものの、
そっちは完全に作り直しになっちゃって大変なのでなかなか…。