サイクリング東京〜富山@2017年夏

この度転職することになり、有休消化で多くのお休みを頂きました。 せっかくなのでこの機会に自転車旅でもしようと思い立ち、東京から実家の富山までサイクリングで行くことにしました。

ルート

f:id:zakisanbaiman:20170727215701p:plain

日程

到着地 走行時間 進捗
7/19(水) 埼玉県東松山市 16:00~20:00(4h) 48km
7/20(木) 長野県軽井沢町 6:30~16:00(9.5h) 170km
7/21(金) 新潟県糸魚川市 8:00~19:00(11h) 327km
7/22(土) 富山県富山市 6:30~12:00(5.5h) 409km

自転車はビアンキのカメレオンテ1(クロスバイク)です。 400キロ超の長距離になるため、バーエンドを購入して挑みました。 f:id:zakisanbaiman:20170727114802j:plain

1日目

16:00出発。次の日の朝に出発しようとも悩んだのですが、近々豪雨が北陸を通るとのことでしたので、中途半端な時間ですがひとまず出発。 この時点では正直まだ「富山まで本当に行けるのか?」とかなり半信半疑な状態でした。

東京から埼玉にかけては起伏はほとんどなく、国道254号をひたすらゆるーりと走ってました。 (写真左手は関越自動車道f:id:zakisanbaiman:20170727165656j:plain

埼玉県東松山市の時点で20:00。もっと先へ急ぎたかったが、もう辺りも暗いししばらくは宿もなさそうなので、たまたま見つけたホテルに一泊。

2日目

早めに起きて6:30スタート。 特に通る気はなかったのだが、数年前に世界遺産になった富岡製糸場がすぐ近くにあったので、雰囲気のみ見に行ってみた。 f:id:zakisanbaiman:20170727182644j:plain

午後からが碓氷バイパスを通って軽井沢へ向かうのだが、勾配がきついきつい(汗。 f:id:zakisanbaiman:20170727181521p:plain

しかもこの日の長野県の最高気温は36度。水分も切れ、自動販売機も峠を超えるまではないので本当に熱中症が怖かったが、なんとかホテルまでたどり着くことができた。 次にまた来る時はもっと多めに水分を持って挑もう。

3日目

ホテルバイキングを食べ、ゆっくりと8:00出発。 一番きつい山は昨日登ったので、今日はかなり気持ち楽に走っていたが、さすが長野県、まだまだ登りはありました。。(標高差は400mほど)

水内(みのち)ダム f:id:zakisanbaiman:20170727213942j:plain

白馬に着き、糸魚川へ向かっていよいよ本格的にスピードの出る下りばかりになりました。もう登りはありません。 しかし次から次へと現れるトンネルと洞門。これが本当に怖かったです。 トンネルは歩道は細く、ヌメリも激しい、またトンネル一本一本がとても長くて結構キツイ。。

糸魚川のホテルに到着することにはヘロヘロでした。

4日目

6:30出発。 しばらく走ると、日本海が見えましたー! f:id:zakisanbaiman:20170727211035j:plain

ずっと山中だったので海が見えるとそれだけで昨日までの疲れが吹っ飛びます。

4日目は登りはほとんどなく、国道8号をひたすら西に進んで行きます。途中トンネルと洞門が多いですが、昨日の外沢トンネルほどではないので気持ち楽に走れました。 これが最後のトンネルかな、と思った城山トンネルは自転車は通れないようで、海側の迂回路を通って行きました。 f:id:zakisanbaiman:20170727211027j:plain

あとはきちんと舗装された国道沿いに走っていけば、すんなりゴールできました!

最初は辿り着けるか不安で仕方なかった旅ですが、なんとか無事たどり着けました。 富山の道路は路側帯も歩道もかなり余裕があり、本当に走りやすいですね。

私が到着して次の日から北陸にはゲリラ豪雨が襲ってきました。もしあと1日到着が遅れていたら、、とんでもなく酷いことになっていたでしょう。 ひとまず無事でなりよりです。

今度は高山とか別ルートから挑戦してみたいですね!

ここまで読んで頂きありがとうございました!

XMLHttpRequestの非同期通信中にリダイレクトできない件

フォーム入力し、XMLHttpRequestで通信して登録結果メッセージを画面表示させたいのだがリダイレクト処理で設定したセッションの値(登録結果メッセージ)が画面で取得できない。
というかそもそもリダイレクトできていない。

処理の流れ

  1. index.blade.phpからXMLHttpRequestでProfileController.phpに非同期通信
  2. 登録結果メッセージをセッションに入れて遷移元画面にリダイレクト
  3. 画面側でセッション値(登録結果メッセージ)を表示

環境

HTML5
AngularJS v1.6.4
PHP5.6 (Laravel4.2)
Vagrant 1.9.3
Ubuntu 14.04.3 LTS


<body ng-controller="ProfileController">
    @if(Session::get('success_message') != null)<div class="alert alert-success" role="alert">{{Session::get('success_message')}}</div>@endif
    @if(Session::get('danger_message') != null)<div class="alert alert-danger" role="alert">{{Session::get('danger_message')}}</div>@endif
        
    <!-- 記事投稿フォーム -->
    <form id="formData" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
            ..
            <省略>
            ..
        <button class="btn btn-primary" type="button" ng-click="setArticleObj()">投稿</button>
    </form>
</body>
// 投稿ボタン押下時
$scope.setArticleObj = function() {

    var form = document.getElementById("formData");
    var fd = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open("POST" , URL + "article/setArticleObj");
    // form送信完了後処理
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            $scope.$apply();
        }
    };
    // FormData送信
    xhr.send(fd);
};
/**
 * 記事投稿機能
 * @return 実行結果
 */
public function setArticleObj() {
    $submitText = Input::get('article');

    $userId = Sentry::getUser()->id;
    $filePath = 'images/articles/';

    // 記事画像アップロード
    $upload = new Upload();
    $response = $upload->uploadArticleImage($filePath);

    // 記事アップに失敗した際にはステータスとメッセージを返す
    if ($response['status'] == 1) {
        return Redirect::to('/admin/edit_text')->with('message', null)->with('danger_message', '更新処理が失敗しました。');
    }

    // 記事登録処理
    $articlesRepository = new ArticlesRepository();
    $articlesRepository->insertForSubmit($userId, $submitText, $response['fileName']);

    return Redirect::to('/admin/edit')->with('success_message', '更新されました。')->with('danger_message', null);
}

ステータスコードは「status:200」で成功してるはずなのでセッション値が取れてるはずなのだが取得できていない。。
xhr.open("POST" , URL + "profile/setImage", false); にして同期通信にしてみるも変化なし。

結局セッション値の取得はあきらめてXMLHttpRequest.responseを使用してメッセージを表示するようにした。(↓修正後)

修正後

<body ng-controller="ProfileController">
    <div class="alert alert-success none" role="alert">@{{ success_message }}</div>
    <div class="alert alert-danger none" role="alert">@{{ danger_message }}</div>
    
    <!-- 記事投稿フォーム -->
    <form id="formData" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
            ..
            <省略>
            ..
        <button class="btn btn-primary" type="button" ng-click="setArticleObj()">投稿</button>
    </form>
</body>
// 投稿ボタン押下時
$scope.setArticleObj = function() {

    var form = document.getElementById("formData");
    var fd = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open("POST" , URL + "article/setArticleObj");
    xhr.responseType = 'json';
    // form送信完了後処理
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            var message = xhr.response.message;
            if (xhr.response.status == 0) { 
                // 成功時
                $scope.success_message = message;
                $(".alert-success").show();
                $(".alert-danger").hide();
            }else{
                // エラー時
                $scope.danger_message = message;
                $(".alert-success").hide();
                $(".alert-danger").show();
            }
            $scope.$apply();
        }
    };
    // FormData送信
    xhr.send(fd);
};
/**
 * 記事投稿機能
 * @return 実行結果
 */
public function setArticleObj() {
    $submitText = Input::get('article');

    $userId = Sentry::getUser()->id;
    $filePath = 'images/articles/';

    // 記事画像アップロード
    $upload = new Upload();
    $response = $upload->uploadArticleImage($filePath);

    // 記事アップに失敗した際にはステータスとメッセージを返す
    if ($response['status'] == 1) {
        $response['message'] = '登録に失敗しました。';
        return Response::json($response);
    }

    // 記事登録処理
    $articlesRepository = new ArticlesRepository();
    $articlesRepository->insertForSubmit($userId, $submitText, $response['fileName']);

    $response['message'] = '登録されました。';
    return Response::json($response);
}

XMLHttpRequestとリダイレクト、セッションの関係が分かったら改めて更新します。

参考: XMLHttpRequest でのリダイレクト処理