スマレジ開発ひよっこblog

株式会社スマレジの開発チームで働くデザイナーのブログ

キャッシュかも

ブラウザのキャッシュを疑うことにはだいぶなれたのですが、
今週はこんなキャッシュに気づかずにしばらく悩みました。
次はすぐ気づけるように覚書です。

cakePHPのキャッシュ

DBのとあるテーブルに新たなカラムを追加。
cake側でその項目を使った処理を追加しようとしたところ思ったように動きません。

もともとcakeのモデルのfind関数でそのテーブルの1行分の全項目(フィールド指定なし)を取得していた部分で、あらたにDBに追加した項目が取得できません。

コードを読み違えていてどこかで取得項目の指定をしていたりするのかな?と思って悩んだ末に先輩に相談すると、「キャッシュ残ってるんちゃう?」とのこと。
cakeが、モデルの取得項目等もキャッシュしているそうです。

app/tmp/cache 配下のキャッシュファイルを削除して無事解決!

 

smartyのキャッシュ

修正する箇所が紛らわしかったので、間違ってるのかな?といろいろ悩んだすえ、
前述の「キャッシュ残ってるんちゃう?」を思い出し調べてみるとsmartyにもキャッシュのようなものが。

smartyはテンプレートをコンパイルしたphpファイルを生成、templates_c格納しているようです。
tplが更新されたときにはコンパイルをし直してそのPHPが上書きされます。
なんらかの理由でこのコンパイル済みデータよりも修正したtplの更新日付が古くなるとこの更新が行われずにいつまでも修正したtplコンパイルしてもらえないようです。
こちらもキャッシュファイル(古いコンパイルファイル)を削除して無事解決。
こんな感じ
http://qiita.com/glaytomohiko/items/5529b01ccf7bee1f1af6
(私はこれもキャッシュかなと思うのですが、正確にはsmartyでキャッシュと呼ばれている機能が別であるようです)


今日は摩耶山に登りました。いい眺めー!

f:id:yamadami:20160724175233j:plain

御霊神社の夏祭り夜店

7/14-15と、オフィスすぐの御霊神社の夏祭りでした。
夕方ごろから外がざわざわ。こんなことになっていたようです。

御霊(ごりょう)神社夏例大祭 « お祭り情報館|お祭り、大好き!

※リンク先は2013年の様子。

 

いいなーお祭りか。と思いつつ少し残って仕事をしていたところ、
同じく残って仕事をしていた人からお祭りいかへん?と誘ってもらい、4人ほどでのぞきにいってきました。

ほんとに歩いて1分くらい。コンビニより近いくらいのところにあります。

途中の道から夜店がでています。

f:id:yamadami:20160717123159j:plain

 

金魚。

f:id:yamadami:20160717123304j:plain

 

御堂筋線入ってすぐのこのあたり、普段は完全にオフィス街で子供はほとんど見ないのですがこの日はいっぱいいました。こんなに人住んでたんですね。

f:id:yamadami:20160717122924j:plain

いつもしずかな道が提灯で照らされて、人で溢れかえってもわっとして、わくわくしました。

ちなみに、降ってないねといって傘を持たずにオフィスを出た瞬間くらいにぽつぽつと雨が降りだし、唐揚げを買って帰るころにはけっこう本降りになりました。
濡れるー、とか言いながら小走りで帰ってきたのも、お祭り補正のおかげで夏っぽくて楽しい思い出です。

行かなかった人たちにはゆだ先輩から唐揚げの差し入れがありました。

f:id:yamadami:20160717123514j:plain

いい息抜きができたので、たい焼き食べながらもう少し頑張りました。

 

最近の開発室の様子 〜梅雨から初夏〜

最近の大阪開発室(と私)の様子です。

 

社内のエンジニア勉強会がはじまりました

先輩エンジニアによるありがたい企画が始まりました。月一回ペースで開催予定とのことです。
第一回目は「関数型プログラミング、リアクティブプログラミングなどのパラダイムについて」
社内のエンジニアがほぼ全員参加で大盛況の中、プログラミングのパラダイムシフトとその具体的な内容や対応の紹介みたいなお話でした。
(すごくふわっとした書き方なのは私が分かってるか不安だからです)

分かりやすく説明をしてくださったため、基礎知識の少ない私にでもテーマの大筋はなんとなく、なんとなーくと分かって、ただ説明の中の「従来はこうでしたよね」の従来の方がすでによく分かっていないため特に変化の具体例なんかが出てくるとなかなかついていけませんでした。
自分ではいつまでも情報収集しなそうな方面にアンテナがはれたような気がするので、いつか消化できる日がくると信じて引き続きめげずに参加していきたいと思います。

 

新しい開発メンバーが入ってきました

7月は開発室に新メンバーが入ってきました!
大採用プロジェクト(という名前ではなかったと思いますが)のなか毎月誰か新しく人が入ってきていますが、開発では3ヶ月ぶりの新メンバーなんですね!
しかもお隣の席になりました。楽しくやっていけるといいなと思います。
またそれにともない、ゴミ箱のなかった私の席付近にゴミ箱が設置されました。
なければ無いで慣れてたけど、あったらやっぱり便利です。

 

スマレジ講習

新しく入社された方向けに行われていたスマレジの機能説明に参加させてもらえることになりました。
機能の全体像や画面を把握しておきたいと思い、合間を縫っていろいろと触ってみるのですが、
スマレジファミリーはとても多機能なので網羅的にどの機能がどこにあってというのを見るのは結構大変です。ですので前からこれに出たいなと思っていました。
私のミスで都合が合わず初回には参加できなかったのですが、週明けの次回に参加するのが楽しみです。

 

ディナー会

ランチ会30回を記念して、6月はディナー会月間でした。

※プラグラムのランチ会について:
会社からランチ代の補助が出て、割り当てられたグループでランチに行ってらっしゃい、という制度。
部署をまたいだメンバーの交流と、素敵なランチを効率良く開拓、情報共有してみんなの話題と食生活を豊かにすることが目的です。
とはどこにも書いていませんが多分そうです。
ブログも公開中です。

プラグラム社のランチブログ♪

 

流しのカゴがもう限界

オフィスはフリードリンク制で、コーヒーメーカーのコーヒーだったり、冷蔵庫の飲み物が好きに飲めるようになっています。
ですのでグラスやカップの数が多く、稼働率も高めです。
4Fがオープンしたりしてそちらの流しに一部お引越しして落ち着いていたのですが、その後もどんどん増えてもうそろそろカップが溢れ出しそうです。
人のカップを割ってしまう前になんとかしなくてはと思っています。

 

 

そんなで7月も引き続きがんばります。

女子ランチ会

以前こんな記事を書きました。

plugram-dev.hatenablog.jp

 

早いものであれから5ヶ月も経つんですね。

社長のブログにも報告されている通り、プラグラムの社員は倍近くになりました。

人事部 カテゴリーの記事一覧 - スマレジの社長ブログ

 

で、女性社員も倍増しました!

何が変わったでもないですが、なにかと楽しいです。

みんな部署はばらばらですが、毎週水曜日はみんなでランチへ行くようになりました。

ビュッフェに行ったり

f:id:yamadami:20160702202503j:plain

サンドイッチを分け合ったり

f:id:yamadami:20160702202519j:plain

焼肉焼いたり(これは前から笑)

f:id:yamadami:20160702202606j:plain

 

OL的ランチを満喫しています。

 

 

 

ジンジャーエールつくりました

こんにちは。

梅雨ですね。

梅雨といえば私はずっと欲しい傘があるのですが、

梅雨になると思い出して買おうか迷い始め、決めかけた頃に梅雨が終わって買わず仕舞いというのをここ数年繰り返しています。

今年は早めに迷いだしたのでついに買うかもしれません。 

オフィスではすでにクーラーが効いていて快適に仕事をしてますが、やはり外とのギャップではやくも夏バテの気配がします。

 

こんなときは生姜ですね。

本当は茗荷てんこ盛りの冷奴が食べたかったのですが、近所のスーパーではここ数日いつも茗荷が売り切れです。

 

新生姜の季節です。

秋にも新生姜って山積みになってる気がする、と思って調べたところ、いわゆる新生姜には2種類あるそうです。

秋に出ている新生姜は秋に収穫・貯蔵されて通年出回っている根生姜の収穫したてのもので、今の時期の新生姜は、通常の根生姜よりも早いタイミングで収穫されたヤングな生姜だということです。隅っこの赤い部分がしっかり残っているのが特徴です。

 

茗荷が無かった代わりに大きな新生姜があったので買ってきました。ちゃんと赤いところがありますね。

f:id:yamadami:20160626173509j:plain

 

刻んで砂糖をどばー。

美味しいお砂糖でつくろう!と思ったのですが量に怯んで半分はラカントs。

f:id:yamadami:20160626173626j:plain

このときに、せっかくなので何かいれます。

今回は唐辛子を入れました。

あとは適当にお水を入れて、シロップっぽくなるまでことこと煮ます。

 

以前旅先で飲んだ自家製ジンジャーエールが感動的に美味しくて家でも真似したいと思ったのがきっかけで、大きな生姜をみかけるとちょくちょく作ります。

その時飲んだものとは全然違う気がしますが(その時の味はもう覚えてない)、だいぶ適当に作ってもいつもそれなりに美味しくできるのでオススメです。

〜その他のオススメポイント〜

生姜の香りが部屋に充満します。

梅ジュース等と違って作ってすぐ飲めます。

シロップは日持ちするのでしばらく楽しめます。

すっきり美味しく飲めてかつ体が冷えないので冷え性に嬉しい。

牛乳で割ったりしても美味しいです。

 

さっそく炭酸で割ってジンジャーエールのできあがりです。

f:id:yamadami:20160626174839j:plain

なんだか部屋が暗くて麦茶にしか見えません。

光を求めてうろうろしていたらベランダに着きました。

f:id:yamadami:20160626175421j:plain

 

のどかです。

AngularJSメモ:ドラッグ操作で並び替えて保存 ②/2

こんにちは。

前回の続きです。
ドラッグ操作で並び替えができるリスト要素とそれに連動するパネル要素を作るところまで行きましたので、あとはこの並び順がリロード時や他のページでも再現されるように保存する機能を作っていきます。
今回はcookieへの保存ができるようにします。

デモ環境では省略していますが、
下記の要領でパネルの並び順をcookie保存しました。
 

並び順をCookieに保存する

saveという保存用のメソッドを作り、並び替え操作があるたびに呼び出されるようにします。
ui.sortablのstop オプションでは、並び替えの際のドロップ操作完了のたびに呼ぶ処理を設定できます。
保存用のsaveメソッドを定義して、sortableOptionsの’stop’に指定しました。
 
cookieのセットには、angukarの公式サイトで提供されているngCookiesモジュールを使いました。
 
配列オブジェクト $scope.Panelsをjson形式の文字列にしてcookieに保存します。
 
こんな感じ
javaScript(AngularJSのコントローラー内)
    var panelsData =angular.toJson($scope.Panels, false);
    $cookies.put('Panels',panelsData);
 
 
あとは、ページロード時にcookieにPanelsのデータが保存されている場合はそれを読み込んでデコードして$scope.Panelsに代入するという処理を書きます。
 
こんな感じ
javaScript(AngularJSのコントローラー内)
    $scope.panelCookie = angular.fromJson($cookies.get('Panels'));
    $scope.Panels=$scope.panelCookie;
 
 
これでドラッグで並び替えて保存、再現の簡単なUIができました。
 
・ngCookiesモジュールはAngularJs1.3から1.4にかけて書き方や機能の変更があったようなので、過去の記事を調べるときには要注意です。
$cookiesサービスを利用する際の注意点とは?
 
・ng-repeatをうまいこと使って繰り返しで出力する要素に任意のhtmlのテンプレートを割りつけたりすれば、一つずつ構造の違うものでもこの要領で並び替えられそうです。
 (実際に今回やりたかったのは実はこれです。)
 
三日以内に更新と思っていましたが結局無理でした^^;
また何かネタをみつたら開発メモ書きたいと思います。

 AngularJSメモ:ドラッグ操作で並び替えて保存 ①/2

こんばんは。スマレジ開発ひよっこブログの時間です。

今作っているアプリではJavaScriptフレームワークにAngularJSを使っています。
その中でパネルの並び順をドラッグ操作で変更して保存するという機能を作ったのでやり方をメモします。

情報共有と、説明してみることでなんとなく使っている用語の整理ができればと思って書きます。ゆっくりゆっくり進みます。

こんな感じのものができあがります↓

・ドラッグ&ドロップでリストを並び替えられる
・並び替えがパネルにも反映される
・並び替えた順番をcookieに保存できる


デモです

codepen.io

cookieの部分がデモ環境で上手く動いてくれず省いたので中途半端なデモになってしまいました。。
実際には、変更した並び順が画面リロード時にも保持されているイメージです。
さあ作ってみます。

ドラッグで並び替えられるリストをつくる


まずドラッグで並び替えをする部分ですが、
jQuerUI(jQueryベースのライブラリ)のSortableというのを使ったらいい感じにできるらしいと教えてもらいそれを使うことにしました。
今回はAngularJSを使用するという前提があったので、SortableをAngularでうまく動くようにしてくれているUI.Sortableというライブラリを使いました。

AngularJSのサブプロジェクト UI.Sortable
https://angular-ui.github.io/ui-sortable/

Gitのreadmeに使用例がいろいろ載っています。


ということで、

準備
jQueryjQuery UI、AngularJS、UI.Sortableを読み込んでおきます。
また、AngularJSでui.sortableのモジュールを呼び出しておきます。(デモのjavascript1行目)

次に、並び替えをしたい要素の親要素にui-sortableディレクティブを追加します。
※AngularJSでは、htmlの元々の属性(href とか)と同様にhtmlnのタグに追加することでいろいろな機能を提供してくれる独自の属性のようなものが用意されており、「ディレクティブ」と呼ぶようです。

ui-sortableの属性値には、オプションが設定できるので、ui-sortable="sortableOptions" としておいてコントローラーの方でオプションの配列を渡しています。
jQuery UIのsortableの全オプションが使えるとのことです。
※試したところ、最低限"items"のオプション(並び替えたいものが何の要素かの設定)はないとうまく動かないようでした。

こんな感じ
html
    <ul ui-sortable="sortableOptions">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

javaScript(AngularJSのコントローラー内)
    $scope.sortableOptions = {
        'items' : '> li',
    }

これだけでぐいぐい並び替られるリストが出来上がりました。
Sortableって便利ですね。

※ちなみにこのままだと、タッチデバイスでは動きません。jQuery UI Touch Punch というライブラリをいれるとスマホなどのタッチ操作にも対応できるようです。

並び替えをパネルに反映させる

今回は並び替えた順番を保存したり、他の要素の並び順に反映させたりしたいので続きをつくっていきます。
ここからAngularJSが活躍します。

やること
配列オブジェクトを作ってパネルの情報と順番をまとめます。(Panelsとしました)
その配列をng-sortableのモデルに指定します。
同じ配列を元にng-repeatディレクティブを使ってリスト部分とパネル部分をそれぞれ出力するようにします。

※ng-repeatは、指定した配列の内容を元に要素を繰り返してくれるディレクティブ。

こんな感じ
html:
    <ul ui-sortable="sortableOptions" ng-model="Panels">
        <li ng-repeat="panel in Panels" ng-bind="panel.panelName"></li>
    </ul>
    <div ng-repeat="panel in Panels" class="panel" ng-bind="panel.panelID"></div>


javaScript(AngularJSのコントローラー内):
    $scope.sortableOptions = {
        'items' : '> li',
    }
    $scope.Panels=[
        {panelID:'1',panelName:'Panel 1'},
        {panelID:'2',panelName:'Panel 2'},
        {panelID:'3',panelName:'Panel 3'},
    ];

これで、ぐいぐい並び替えられるリストと、それに連動して動くパネルができました!


②に続きます。

続きますと書いて続きが書けていない記事がありますが、

今回は3日以内のアップを目指しています。


[参考にしたページ]

[AngularJS] UI.Sortable を使ったドラッグ&ドロップ UI の構築

AngularJS $cookies

ウェブデザイナーがはじめるAngularJS:ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス