今年の抱負に対する結果はどうだったか?について振り返る

今年の1月3日に新年の抱負を書いていた。具体的な内容はすっかり忘れていた。(笑)

今年の抱負というかキーワード

それで、箇条書きの5項目についてそれぞれどうなったかを書いておく。

(1) スマホアプリ(ハイブリッドアプリ)制作のスタディ(→ 勉強のみ)

これは早期に諦めた感半端ない。一応勉強はしたけど、具体的な顧客もそのイメージもないので、本当に「スタディ」で終わってしまった。今後どうするか分からないけど、そういう案件は誰かに振るというのが最も現実的。

(2) Adobe XD を使ったデザイン・プロトタイプ制作(→ できた)

これはもう、自分でデザインしてサイト作るときには必ず使っている。自分の中では定番ツールになった。
先日、ついにXDも正式リリースして有料化されたので、僕もサブスクリプションを追加した。(僕はPSもXDも単体サブスクリプションなのだ)

(3) CodeIgniter を使った簡単なショップカート制作(→ できた)

こちらも進展は大きかった。
手始めにクライアントのサイトの一部に簡単なショップカートを作って組み込んだ。これは単にカートになっているだけで、受注管理とかはなくてメールだけでハンドリングするもの。会員機能もないシンプルなもの。

さらに、ウェブサービスのシステム開発の依頼があったので、そこでCIを使った。実はまだリリースできてなくて保留になっているけれど。
それから、見積もり系のシステムの依頼があって、それにもCIを使った。この秋はそれをひたすらやっていて、一旦Phase1が終わったところ。

CodeIgniter(フレームワーク)の使い方を覚えると、どんどんアプリケーションを作りたくなるね。今後も楽しくやって行くつもり。

(4) WordPress の制作手法の見直し(→ 別のものに興味湧く)

これは WP REST API を活用したいという趣旨だったけれど、結局全然やってない。今後、またやろうとするかもしれないというレベル。
それより、WordPress.com の方に興味が湧いてきていて、いわゆる「サイト作りたいんですけどー」とか「ブログやりたいんですけどー」というニーズに対して一声「これどうですか?」と勧めたいなと思っていて、そのために、自分のブログなりサイトをこのサービス上で運用することを考えつつあるところ。

(5) フロントエンド(→ イメージだけ継続)

とりあえず今のところ、Vue.js をなんとか使いたいと考えているので・・・考えているだけだけど、継続して来年もなんか考えたい。jQueryは便利だけど、そうじゃない世界にも行ってみたいという希望があるので、その辺のモヤモヤが解消できたらいいなと思っているところ。

 

以上のような感じだけど、とりあえずCodeIgniterでアプリケーション作れるようになったのが今年の一番の成果だった。
それと、サイト制作に関しては、必ずしも作ることにこだわらないで便利な(手間いらずな)ツールを利用して効率的にやろうという気持ちになってきたことがあると思う。

というわけで、来年の抱負はまた正月に書くと思う。

カフェで原因究明

不具合対策

サイトのリニューアル1つ公開したものの、iPadでナビが見えない(汗;)という問題に遭遇したため(なんで見てなかった??)とりあえず Multi Device Switcher から iPad を外して、まあ、土曜日だしカフェにでも出かけてゆっくり見てみるかということで・・

顧客の制作環境は、基本持ち歩かないようにしていて・・(このご時世なのでそろそろクラウドに上げておいてもいいのだけど)・・だけどこの場合は、HTMLとCSSとJSだけ触れたらいいから、サイトに普通にアクセスしてページを1つ、保存して、そのファイルを弄りながら検討するという、実にカフェライクな仕事だ。エディタは Visual Studio Code.

フロントエンドは、こういうことが簡単にできるからいいね。カフェ作業にはもってこいだ。

で、なぜ iPad だけナビが見えないのか??正確にいうと見えないだけでボタンは反応する。最初、JSとかもしくは機種そのもののなんかバグがあるのか?などと思った訳だけど、はちみつバナナジュースを飲みながら落ち着いて考察し、たぶんCSSがどっかおかしんじゃないか?と思って調べたら、すぐに判ってしまった。
header の要素内にナビを置いて position: fixed にしているものの、header に overflow: hidden かけてた。(とある事情により)
他の端末では見えるが、iPadでは見えない。ふーん、そうなのか。

とまあそんな感じで、原因判ったからホッとする。

ブレイクスルーJavaScript これから読む (^^)

ブレイクスルーJavaScript

フロントの話ができることを嬉しく思います・・
というとなんかアメリカ人のスピーチの前置きみたいだけど、僕にとってのフロントのメインはJavaScriptで、それについて書くこともこのブログの柱の一つなので、ようやくその入り口に立った気はしてる。

最近わりとごそごそやってはいるし、案件でも色々やってはいるが、JavaScriptについて分からないことは多い。
まだまだベーシックな部分が分かっていないはずだ、と思いながら過ごしているけど、何気に本屋でJSの棚を見ていたら、この本があったので手にとってみた。

ブレイクスルーJavaScript 〜フロントエンジニアとして越えるべき5つの壁〜

本の表紙に書かれている言葉で、僕の目を引いたのは、「シングルページアプリケーション」と「jQueryのその先へ。」という2つの言葉だろう。最近の自分の関心事を表しているから。

幸い、読みやすそうな、ポイントが解説されてそうな本だし、ちょこっとコード書いて確認するのにも良さそうだから、僕は良い本だと感じた。
参考書はKindle本として買うことが多くなっているが、これはたまたま本屋で見つけて、さほど重くなかったのでそのまま買ってきたという具合。

Ajax使って新しいことをやってみた

新しいことと言っても画期的なこととかでは全然無いので・・・

おかげさまで CodeIgniter でのWebアプリケーションもまた1個できた。
それで今回、サイト全体をCIで管理するのはやめて(つまりトップに index.php 置くのやめて)、システム用のディレクトリを作ってそこに管理サイトを置き、サイトページからはAjaxで通信するように構成してみたが、
結論からいうと、そこまでしなくても良かった気はしてる。(汗)

発注元の都合により、サイトにはPHPの静的ファイル群があり、さらにブログなどはWordPressで作るらしい。だから上記の構成を考えたわけであるが、AjaxとPHPフレームワークとの連携は、思ったより相当、大変だった。

<ページ遷移>

サイトトップで条件を選んで、条件にあった情報の一覧を表示し、詳細ページにも遷移する。
一覧ページでユーザーが必要な情報にチェックを入れて、次に進むと、選んだ情報とユーザー情報の入力フォームが表示され、そこから確認画面に行き、完了画面まで行くと、メールが送信されるというもの。(ショップのページみたいな感じ)

各ページは、PHPの静的ページ。
CIで管理している情報を、PHPの静的ページに出力させるには、(たぶん)Ajaxしか無いので、各ページで動くJSのコードを書いた。それぞれからCIの情報にアクセスしてゲットした内容を書き出し、フォームに入力されたデータの送信を行い、次のページに遷移(リダイレクト)する。
それで、検索結果と詳細ページは、URLクエリを叩いたら出るようにした。

スマートじゃないけど・・・出来てしまったものは仕方がない。(笑)

<ページ間のデータの保持>

今回、初めて Web Storage (localStorage)を使ってみた。なんのことはない、非常に簡単だった。
一覧ページは複数に渡るので、ページを跨いでユーザーがチェックした情報(ID)が、どれであるかを保持しておく必要がある。そのために使った。
送信完了すればデータを消去する。(残ってしまう場合もあるけど)

<市区町村コードAPIの使用>

ユーザーがエリアを選択するため、および、管理側でエリアを登録するために、市区町村コードAPIを使ってみた。
http://www.land.mlit.go.jp/webland/api.html
これは、都道府県コードで呼ぶと、その中の市区町村のJSONデータが返ってくるというもの。
都道府県コードAPIというものが(たぶん)無いので、都道府県コードの配列は自分で作った。
ユーザーが都道府県を選択すると、その横のセレクタに市区町村の選択肢が出てくるようにする。

Ajaxで取ってくれば簡単だろうと思ったが、やってみると意外と色々やらなきゃいけないことがあった。
このサービスはSSLでは提供されていないようなので、SSLページからAjaxで呼ぶとERRORとなる。さあどうしましょ?

仕方ない、というか、セレクタ操作するたびにAPI呼びに行くのもダサいなということも同時にあって、一旦、APIの情報をサーバー上に保存(キャッシュ)するようにした。DBにするか迷ったけど、テキストファイルに保存してみた。
そこからCIでAjaxに提供する。最初、管理画面もAjaxでAPI呼びに行っていたので、そちらはCI内で処理するように変更した。それでようやくスッキリ動くようになった。

大変ですな。当初はすごーーく簡単に考えていたけど、意外としんどかった。
しかし結構いろいろ、AjaxやJSやjQueryのことが勉強になった。今度からもうちょっと素早く立ち回れるようになるだろう。今回のも、イケてない部分もあるので改善したいところ。

Vue.js 触り始め

PHPのフレームワークはCodeIgniterで2つほどアプリケーション作って一段落したところ。
とても馴染みやすいしシンプルだし、使って良かった。これからも使っていく。(^^)

さて、JavaScriptどうしようかな?というところで、
jQueryは結構、気に入ってるし、JSというよりjQueryでいつも遊んでいる感じなんだけど、(いや仕事だって)
やはり周りの人々はなんかjQueryを嫌っているっぽい。見通し効かないとかメンテしにくいとか言ってる。

たしかにコードが野暮ったくなるような気はしなくもないけど、JavaScriptの長いメソッド名のドットシンタックスだって、たいがい野暮ったい気がするんだけどね・・

でまあ、フレームワークは使ってみないと分からないので、なんか1つ触ってみようということで、Vue.js を選んでみた。
Viewに特化したものらしいので、厳密にはフレームワークではないと言っている人もいるみたい。まあ個人的にはどうでもいいかな。ただ、Angularみたいなのは僕にはたぶん、手に負えないだろう。

手始めにこの辺り
https://jp.vuejs.org/v2/guide/

を読んで書いてみたわけであるが、なんか、文章が難しい。。Vue.js みんな簡単だとか言ってるイメージでこれ読むと「おいおい!」ってなった。結構アセる。
ワラをもすがる思いで検索しまくっていると、こちらが出てきた。
http://gihyo.jp/dev/serial/01/vuejs

この方が分かりやすそう。さすが技評ですね。とりあえずこれをトレースすることにする。
いつまで続くか分からないけど、他に好きな選択肢もないので(笑)これからブログでもネタにしようと思っているところ。