動画のストリーミングに挑戦していて、pythonで書いているので、ウェブページも手っ取り早くpythonで立ち上げたいと思い、やってみました。 このサイトの通りにやればHello, worldはすぐにできます。 公式qu …
カテゴリー: web系
elmでwebアプリ作成11 〜 施設情報修正ページ
Shisetsuでは、ユーザーが新しい施設を追加でき、また施設情報を編集することができます。 ここでは施設情報の編集ページを作りましょう。施設個別ページに「編集」ボタンを作り、そこから編集ページへ飛べるようにします。 編 …
elmでwebアプリ作成10 〜 施設個別ページ
前回ルーティング処理を作成したので、今回は施設個別ページを作って、ページ遷移するところまでやります。 src/Facilities/Single.elmを作成 ここでは、Modelではなく一つの施設データFacility …
elmでwebアプリ作成9 〜 施設個別ページとルーティング
タイトルの通り、施設個別ページの作成と、ルーティングの定義です。 ページ遷移時にどのような処理が行われるか、図があるとわかりやすいのですが自分で作るのが面倒なので、またあのページの”When the location c …
elmでwebアプリ作成8 〜 施設名をリンクにする
各施設の個別ページを作るため、まずは施設名のところをリンクにし、そこをクリックした時に/#facilities/施設IDへページ遷移するようにします。 src/Routing.elmの作成・編集 施設個別ページ用のパスを …
elmでwebアプリ作成 7 〜 webAPIで取ってきたデータを表示
基本的にelm tutorialの真似をして進めています。表示するデータが少し違う程度です。 今回の内容はこの辺りです。 前回は施設一覧を表示することができるようになったので、はじめに作ったjsonモックサーバーからデー …
elmでwebアプリ作成 6 〜 施設一覧ページ
作りたいものは、商業ビル、観光スポット、コンサートホール、動物園、水族館、公共施設、体育館、遊園地等の施設情報をまとめるサイトです。 行く際の注意点、開館時間、トイレの有無・場所、ゴミ箱の有無・場所、食事できる店の有無・ …
elmでwebアプリ作成 5 〜 複数モジュール化
複数モジュール化していきます。 ソースの中身は違いますが、elm tutorialのやり方を真似してやっていくので参考にしてください。 今はこの状態ですが、 $ tree src src ├── Main.elm ├── …
elmでwebアプリ作成 4
前回の続きからです。 package.jsonに追記して、ビルドやサーバー起動のコマンドをまとめます。 以下を追記 “scripts”: { “api”: “node api.js”, “build”: “webpack …
elmでwebアプリ作成 3 〜 elm＋webpackでHello
webpack.config.jsが出来たので、まずはelmで最小限のアプリを書いて動作させて見ます。 この辺りはelm tutorialとほぼ一緒です。 ソースディレクトリを作ります。 $ mkdir src src/ …