投稿日:

    カテゴリー 技術 / デザイン / 制作タグ ,

    AWS loft

    制作部の里山です。

    AWSがコワーキングスペースをオープンしたようです。

    AWS loft tokyo

    AWSのアカウントを持っていれば誰でも無料で利用でき、
    ソリューションアーキテクトやサポートエンジニアへの相談もできるようです。

    利用時間は平日(月〜金) 10:00 〜 18:00となるようです。
    フリーランスの方やノマドワーカーの方にとっては、
    良い環境かもしれません。

    ディスカッションする場もあれば、黙々と作業に集中できる場所もあるようです。
    予約制でもいいので休日も開けてくれたりすると、
    個人的には結構使ってみたいです。

    そういえば、カフェなどで読書したりちょっとした作業をすると、何となく集中力が上がりますね。
    程よいノイズと開放感が良い刺激にでもなるのでしょうか。

    では。


    関連記事

    • 書籍レビュー:確かな力が身につくJavaScript「超」入門

      対象書籍

      確かな力が身につくJavaScript「超」入門:狩野 祐東(著):SB Creative
      Amazonリンク

      主な内容

      ・コンソール、Window.alertの使い方 ・document.getElementByIdを使ったHTMLからの要素の読み取りと書き換え ・if( ) {} else {} else if {}の使い方 ・window.prompt()からのユーザー入力値の取得 ・Math.floor、Math.randomを使った乱数の生成 ・for (var i =1; i <= 10; i = i + 1 ) {}の形による処理の繰り返し ・while (i <=10) {}の形による処理の繰り返し ・functionの作成 ・配列、オブジェクトによる複数データの管理 ・Dateオブジェクトを使った現在時刻のリアルタイム表示 ・プルダウンメニューと選択結果に応じたHTML表示内容の変更 ・js.cookie.jsとCookies.setを使ったクッキーの使用 ・jQueryによる開閉ナビゲーションメニューの表示 ・AjaxによるJSONデータの読み込み 他

      一通り流してみて

      Amazonでの評価もとても高い本書ですが、私には残念ながら合いませんでした。理由は以下3点。 ・JavaScriptの主な用途の1つがHTMLの動的編集である、と冒頭で宣言しているにも関わらず中盤以降までコンソールによる確認を多用している。(私はこれは途中から無視して適当な<p>タグをターゲットに確認したい内容を出力するようにしました) ・無理にゲーム仕立てに見せようとしてかえって分かりづらくなっている ・超入門用途の本であるにも関わらず、CookieやJSON読み込みのところは必要に応じて自分でWEBサーバーを立ててください、とありそれについてのフォローが一切ない ただ、フォローもすると英文の翻訳のように1つ1つのコードを分解して、それこそ丁寧に和訳(解説)してくれています。この点についてはきっと助けになる人も多いかと思われ、複数入門本を買う際の1冊に入れておくには良いと思いました。

      PickUp!

      一通り流した中から、1つだけPickUpし、その内容を紹介しつつ自身でも反芻したいと思います。そのターゲットは

      AjaxによるJSONデータの読み込み

      です。これが一番業務ぽく?って今後も目に触れる機会が多いかと考え。

      お題目

      こんな画面と、 こんなJSONファイルを用意し、「空き状況を確認」ボタンを押すたびにJSONファイルを読み込み、usingの値から会議室が空いている空いてないを判断し、HTMLの表示内容を変えるものです。 書いた内容を順で追っていきます。

      jQuery読み込み用コードの取得

      https://code.jquery.comからコード(上画面の選択部分)を持って来て、HTMLファイル内に貼り付けます。(今回は書籍の指示に従ってjQuery1.xを選択)

      JSON読み込み部分

      基本書籍に従えば良いだけのはずがとても手こずりました... まずhtmlファイルをダブルクリックで開くでは動いてくれなかったので、Macbook上でのApache起動から入り、なんとなくコンテンツを自身のユーザーディレクトに起きたかったのでhttpd.confをいじったりで時間を使った挙句、htmlファイルは良いのですが同じ位置に置いたstyle.cssなどを全く認識してくれず、結局Apacheがdefaultで見る/Library/WebServer/Documentsに各ファイルをまとめて置くことに。 それでもうまく行かず、コンソールにもなんのエラーも出ないので、こんな処理もどこからか拝借して貼り付けるも'失敗'の連続で。。 最後はこちらに助けられました。 【初心者向け】JSでJSONが読み込めない!?エラーの原因はこれ ajaxの処理とかよりjsonファイルそのものを最初に疑ったほうがいいよ、と。。言われた通りに見てみると、 この4行目の最後に , が残ったままで。。そんなところが原因とは思わずだいぶ遠回りをしました。 改めてコードに戻ると、 168行目でHTMLファイル読み込みと同時に以下を実行 170行目でajaxによるJSONファイルの読み込み 171, 172行からのfunctionでJSONファイル内の全データを精査、usingの値が'yes'だった場合は、JSONデータからidの値を読み込み、以下HTMLのidと一致する要素に対して不可視の要素notava(not availableの意味で適当につけました)を追加しているといったところでしょうか。

      [ 空き状況を確認 ]ボタンをクリックした時の処理

      ボタンをクリックしたらその時にJSONを見にいって判断するのではなく、不可視の要素'notava'がついているいないを判定し、その内容に応じて<p class="check">のテキストの値を書き換え、合わせて背景色も変更します。 CSSにもあらかじめこんな内容を追記  

      各ボタンを押した結果

      JSONファイル内のusing = yes/noの値に従ってボタンの表示内容が変わることが確認できた。

      少しカスタマイズ

      思わぬところで手こずり時間もかかってここまで来ましたが、いちいち1個1個ボタンを押すことで更新は間抜けだなと思い、書籍の中盤で出て来た時計表示のコードを流用して、JSONファイルが書き換わったら即時HTMLの表示内容も変わるようにしました。 HTML読み込み時に$.ajax({...を開始という部分を無効化します。   ・変わってajaxでJSONファイルを読み込んでいる部分を'reRead'という名前のfunctionに ・'noava'という不可視の要素を追加するのをやめて、JSONデータ読み込みと同時にHTMLの表記も変える内容に変更 ・一通りJSONデータの読み込みとそれに応じたHTMLの編集処理が終わったら、refresh()ファンクションを実行するように最後に追記   refreshファンクションでは10秒ごとにreRead(JSONデータの読み込み)を実行するように指定。 これにより、JSONのusingの値を書き換えると、10秒以内にHTMLの表示内容も自動的に書き換わるようになりました。こちらの方がちょっと本物ぽい?!ですね。  

      最後に

      途中ちょっと個人的な不満も書きましたが、こうして振り返ると私にとっても気づきがたくさんあり、Amazonレビュー通り良書の一つであると改めて思いました。  
      2018/09/24 技術 / デザイン / 制作
    • Extension集を作成すると便利だという話【Swift4】

      皆さんこんにちは、ロンアンです。 開発者の皆さんに、自分のExtension集を作成することで便利になり開発も速くなるというお話をしたいと思います。 このブログでは例としてSwift4版を使います。 プロジェクトにおいて、似ている機能が二つ以上出てきたり、それから他のプロジェクトで同じ機能が必要になることは多いですよね。 色な対応方法がありますが今回はextensionを紹介します。 Extensionを使うとどんないい事があるのでしょうか?
        *以前作成した機能を再使用できるため、開発が速くなります。
        *再使用することによって調整されて不具合がなくなります
        *ソースコードがきれいになります。
      例として画像のalphaをチェックする機能でExtensionを理解してみましょう 普通の開発型は以下のソースです
        func hasAlpha(_ image:UIImage) -> Bool {    let alpha = image.cgImage?.alphaInfo    return alpha == .first || alpha == .last || alpha == .premultipliedFirst || alpha == .premultipliedLast } func abc() {    let image = .....    if hasAlpha(image) == true    {      //,,,    }else{      //...    } }
      extensionを使う場合は
        extension UIImage{
          func hasAlpha(_ image:UIImage) -> Bool {    let alpha = image.cgImage?.alphaInfo    return alpha == .first || alpha == .last || alpha == .premultipliedFirst || alpha == .premultipliedLast }
        } func abc() {
          let image = ..... if image.hasAlpha() { //,,, }else{ //,,, }
        }
      上の二つは同じように見えますが、普通型のほうはhasAlpha機能がClassに属しており、Extension型はUIImageに属しています。Classに属している機能を他のClassで使用するのはちょっと簡単ではないのですが、UIImageの場合は何にでも使用できます. このような汎用性の高いExtensionをまとめて、コレクションを作成しておくことで、他のプロジェクトで容易に再使用できます。
      2018/10/04 技術 / デザイン / 制作
    • 書籍レビュー:いちばんやさしいPHPの教本

      対象書籍

      いちばんやさしいPHPの教本 人気講師が教える実践Webプログラミング : インプレス
      (Amazonリンク)

      主な内容

      ・MAMPのインストールとWebサーバー、DBサーバーの準備 ・ブラウザ上のUIを通じて、DBサーバーへの新規レコード登録、レコードの編集、レコードの削除 一通り流しての出来上がりは見た目も動きもとても地味なものですが、WEB UIを通じてデータベースの編集は何にでも通じる内容で、それを初心者向きに必要な環境構築から噛み砕いて解説した本書はなかなか秀逸でした。(ちょっとしたケアレスミスでだいぶ時間を取られたところも何度かありましたが..)

      いくつかピックアップ

      MAMPインストール

      MAMPはMacintosh, Apache, MySQL, PHP の頭文字を取った略のようですね(Windows版もありますが)。 ダウンロードは  https://www.mamp.info/en/ からでインストール完了まで迷うところは何もありませんでした。 親子の象がなかなか印象的です。   インストール後、少しだけ迷ったのがMAMPのPreference画面の起動です。書籍と同じボタンが見当たらず、しばしフリーズしましたが上部メニューから辿れました。またWEBサーバーが使用するポート番号も、もともといるMacのApacheを検知しているのか最初から80以外になっており、こちらも変更する必要はありませんでした。

      データベースの準備

      今回のお題目は料理のレシピ集をPHPを通じてデータベース上で管理するというものです。MAMPインストール後に出てくるウィンドウからOpen Webstart pageをクリックし、ブラウザ上に表示される画面からphpMyAdminを選択します。 データベースとテーブルの作成は今回はこのphpMyAdminのGUIから行いました。テーブルは1個のみです。選択できるデータ型がとても多くあるのでこの辺りの理解と使い分けも今後の課題として捉えます。その他DB側のユーザーアカウント作成などもあわせて実施。  

      PHPからデータベースへ接続、レコードの読み取り

      最初はphpMyAdminの画面を使ってGUIからレコードを仕込んでおきます。料理のレシピ集というテーマなので以下を登録しておきます。(各レコードのidのみ自動付与のAUTO_INCREMENTになっています。) この各レコードのidの値をURLを通じてPHPに引き渡し、そこから該当のレコードを読み取って内容をHTMLで表示するというものです。こちらが書きあがったコードです。2〜9行目あたりでユーザーsuzukiを使ってDBに接続しているのですが、何度も繰り返しコピペで目に慣れてくるまでは違和感だらけでした。PDO Statementについても種類がたくさんあり、DEBUGのために意図的に変えて使いそうなものもあり、こちらも今後理解を深めていきたいポイントかと感じました。 ブラウザ側はURLに以下のような文字列を指定して、最後のid=1をPHPに引き渡します。 http://localhost:8888/study/detail.php?id=1 このid=1を条件として含めて12~18行目あたりでSQL文を実行している感じです。この間も "=" と "- >" の違いなどはまだまだイメージが湧かず、まずは書籍の通りに進めているといった状況です。その後読み取った内容を使ってechoでHTMLを生成しているようです。その実行結果がこちら。(CSSでの装飾なども何もしてませんが、今回はPHPの勉強ということで..) このHTMLを生成しているechoの実行部分に毎回ついているhtmlspecialchard ENT_QUOTESうんぬんはタグなどに該当する記号を文字に置き換えることで意図せぬJavascriptの実行などを防ぐセキュリティ上の施策だとか。これも自分だけでやっているとそのうち勝手に省いてしまいそうですが、今後お手本となるコードを見るときにこうした記載が必ずあるのかどうか確認していきたいと思います。

      データベースへの新規レコードの追加

      最初にHTMLで入力フォームを作ります。 こうして改めて見てみると、36行目のボタンと10行目のpost actionがどうやって紐づいているのかなと思いました。この組み合わせが複数あったらどうするのだろう?と。いったんは先に進めます。実際の画面の見た目はこちら。 HTMLの10行目で呼び出しているSQL書き込み用のPHPがこちら。 $_POSTの配列の中にHTML上の各入力値がnameの名称で識別された状態で入ってきているようですね。またこれらの値をSQLの引数として記載する際もSQL内に直接書くのではなく、bindValueで別にして並べているのが印象に残りました。引数がたくさんある時は何番目なのか順番を数えつつ、対応する値を見比べることになるので数が多いと面倒だなと思いました。

      レコードの削除

      こちらもレコードの読み取りと同じで、最初は以下のようなURLを通じて引き渡されたidの値をキーにレコードの削除を行います。 http://localhost:8888/study/detail.php?id=1 コードもSQLの文章が変わった以外はほぼレコードの読み取りと同じです。  

      ここまでの機能のまとめ

      DB内にあるレコードを全て読み取り、HTML上にテーブルとして書き出す処理を中心に各機能が繋がるセンター画面を作成します。foreach ($result as $row){}だけで勝手に最後までまわってくれるのですね。 画面の出来上がりはこんな感じで、既存レコードに対しては閲覧、編集、削除が行え、また新規レコードの追加も行えるというものです。 本当に基礎の基礎ですがPHPの基本的な書き方と、SQLの基本となるレコードの追加、更新、削除もPHPを通じての実行が一通り行えました。今後はもう少しCSSの装飾も加えつつ、マスターテーブルのようなものを設け、テーブル間の連携がある前提でのデータ操作に進めたらと思います。

      書籍全体の感想

      前回のJavaScript本の残念感も重なって、とても良かったです。必要な環境構築も説明もあり、かつ1行1行のコードの説明もくどすぎず、とても分かり易かったです。なので同じシリーズのJavaScriptやHTML/CSS本も買い直そうかと思いましたが、どれも著者が違うようなので本のシリーズではなく著者の柏岡秀男さん、 池田友子さんで追いかけたほうが良さそうです。
      2018/10/14 技術 / デザイン / 制作