-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
924 lines (751 loc) · 68.2 KB
/
atom.xml
File metadata and controls
924 lines (751 loc) · 68.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[FUKULOG開発者ブログ]]></title>
<link href="http://fukulog.github.io/atom.xml" rel="self"/>
<link href="http://fukulog.github.io/"/>
<updated>2013-08-20T23:21:00+09:00</updated>
<id>http://fukulog.github.io/</id>
<author>
<name><![CDATA[FUKULOG]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Google Apps Script を使って各種有効期限を管理＆メールでお知らせするようにすると便利]]></title>
<link href="http://fukulog.github.io/blog/2013/08/20/gas-sendmail/"/>
<updated>2013-08-20T18:55:00+09:00</updated>
<id>http://fukulog.github.io/blog/2013/08/20/gas-sendmail</id>
<content type="html"><![CDATA[<p>GAS（Google Apps Script）を使って、ドメインやSSL証明書などの有効期限を管理＆メールでお知らせするようにしたら便利だった件。</p>
<p>更新が必要系サービスで、有効期限直前に慌てて更新手続きすることってありますよね。
ドメインだったり、Apple Developers Program だったり、iOSアプリに必要な証明書だったり。</p>
<p>それらをちゃんと管理しようと思って、最初はGoogleカレンダーでいいじゃん、って思ったんですが、
1画面で利用サービスを一覧出来る感じも欲しいなぁ…と。リマインドしてくれるだけならGoogleカレンダーで十分なんですけどね。</p>
<p>というわけでGAS！便利です！GASって言っても、JavaScriptだし！</p>
<h2>有効期限管理表をGoogleスプレッドシートで作る</h2>
<p>まずは、こんな表をGoogleスプレッドシートで作ります。</p>
<p><img src="http://fukulog.github.io/images/gas_sendmail.jpg" title="Googleスプレッドシート" ></p>
<p>もちろんカラムやカラム名などご自由に。</p>
<h2>スクリプトを書く</h2>
<p>ここから実際にスクリプトを書いていきます。
上で作ったスプレッドシートの画面で、[ツール]→[スクリプト エディタ]を開きます。
別画面でエディタ画面が立ち上がると思うので、カラム名やメールなどを埋めつつ、下のようなスクリプトを書いていきます。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
<span class='line-number'>61</span>
<span class='line-number'>62</span>
<span class='line-number'>63</span>
<span class='line-number'>64</span>
<span class='line-number'>65</span>
<span class='line-number'>66</span>
<span class='line-number'>67</span>
<span class='line-number'>68</span>
<span class='line-number'>69</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">sendMailExpiredServices</span><span class="p">(){</span>
</span><span class='line'> <span class="cm">/*</span>
</span><span class='line'><span class="cm"> * Config</span>
</span><span class='line'><span class="cm"> */</span>
</span><span class='line'> <span class="c1">// カラム名</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">SERVICE_COL_NAME</span> <span class="o">=</span> <span class="s1">'サービス'</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">LIMIT_COL_NAME</span> <span class="o">=</span> <span class="s1">'期限'</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">ADMIN_COL_NAME</span> <span class="o">=</span> <span class="s1">'管理者'</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">COMMENT_COL_NAME</span> <span class="o">=</span> <span class="s1">'コメント'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// メール</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">admin</span> <span class="o">=</span> <span class="s1">'nagasawa@example.com'</span><span class="p">;</span> <span class="c1">// 管理者（必須）</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">to</span> <span class="o">=</span> <span class="s1">'nagasawa@example.com, foo@example.com, bar@example.com'</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">//cc : '',</span>
</span><span class='line'> <span class="nx">bcc</span> <span class="o">:</span> <span class="nx">admin</span><span class="p">,</span>
</span><span class='line'> <span class="nx">reply</span><span class="o">:</span> <span class="nx">admin</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// 何日前に送信するか</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">grace_time</span> <span class="o">=</span> <span class="mi">1000</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="mi">24</span> <span class="o">*</span> <span class="mi">7</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="cm">/*</span>
</span><span class='line'><span class="cm"> * Main</span>
</span><span class='line'><span class="cm"> */</span>
</span><span class='line'> <span class="k">try</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">sheet</span> <span class="o">=</span> <span class="nx">SpreadsheetApp</span><span class="p">.</span><span class="nx">getActiveSheet</span><span class="p">();</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">range</span> <span class="o">=</span> <span class="nx">sheet</span><span class="p">.</span><span class="nx">getDataRange</span><span class="p">();</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">today</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><=</span> <span class="nx">sheet</span><span class="p">.</span><span class="nx">getLastRow</span><span class="p">();</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">subject</span> <span class="o">=</span> <span class="s2">"【期限切れ】"</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">body</span> <span class="o">=</span> <span class="s2">"の期限が迫っています。\n\n"</span>
</span><span class='line'> <span class="o">+</span> <span class="s2">"------------------------------------------------------------\n"</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">footer</span> <span class="o">=</span> <span class="s2">"------------------------------------------------------------\n\n"</span>
</span><span class='line'> <span class="o">+</span> <span class="s2">"更新の手続きをお願いします。\n\n"</span>
</span><span class='line'> <span class="o">+</span> <span class="s2">"※更新後はシートの【期限】も更新してください\n"</span>
</span><span class='line'> <span class="o">+</span> <span class="s2">"<Googleスプレッドシートの共有リンク>\n"</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">flg</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><=</span> <span class="nx">sheet</span><span class="p">.</span><span class="nx">getLastColumn</span><span class="p">();</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">col_name</span> <span class="o">=</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getCell</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="nx">j</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// カラム名</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">col_value</span> <span class="o">=</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getCell</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">).</span><span class="nx">getValue</span><span class="p">();</span> <span class="c1">// 入力値</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">body</span> <span class="o">+=</span> <span class="s2">"【"</span> <span class="o">+</span> <span class="nx">col_name</span> <span class="o">+</span> <span class="s2">"】\n"</span><span class="p">;</span>
</span><span class='line'> <span class="nx">body</span> <span class="o">+=</span> <span class="nx">col_value</span> <span class="o">+</span> <span class="s2">"\n\n"</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span> <span class="nx">col_name</span> <span class="o">===</span> <span class="nx">SERVICE_COL_NAME</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">subject</span> <span class="o">+=</span> <span class="nx">col_value</span><span class="p">;</span>
</span><span class='line'> <span class="nx">body</span> <span class="o">=</span> <span class="nx">col_value</span> <span class="o">+</span> <span class="s2">"\n\n"</span> <span class="o">+</span> <span class="nx">body</span><span class="p">;</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span> <span class="nx">col_name</span> <span class="o">===</span> <span class="nx">LIMIT_COL_NAME</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">diff</span> <span class="o">=</span> <span class="nx">col_value</span> <span class="o">-</span> <span class="nx">today</span><span class="p">;</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">diff</span> <span class="o"><</span> <span class="nx">grace_time</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">range</span><span class="p">.</span><span class="nx">getCell</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">).</span><span class="nx">setBackgroundColor</span><span class="p">(</span><span class="s1">'#fAA'</span><span class="p">);</span>
</span><span class='line'> <span class="nx">flg</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="nx">body</span> <span class="o">+=</span> <span class="nx">footer</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">flg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">MailApp</span><span class="p">.</span><span class="nx">sendEmail</span><span class="p">(</span><span class="nx">to</span><span class="p">,</span> <span class="nx">subject</span><span class="p">,</span> <span class="nx">body</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">MailApp</span><span class="p">.</span><span class="nx">sendEmail</span><span class="p">(</span><span class="nx">admin</span><span class="p">,</span> <span class="s2">"【失敗】有効期限管理表からメール送信中にエラーが発生"</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>スクリプトを保存（フロッピーボタン）して、試しに実行（再生ボタンみたいなやつ）すると、
スプレッドシートの方で、期限が近づいてるセルが赤くなったと思います。</p>
<h2>届いたメール</h2>
<p>そして実際に届くメールがこんな感じ。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>Subject: 【期限切れ】iOS Development
</span><span class='line'>
</span><span class='line'>iOS Development
</span><span class='line'>
</span><span class='line'>の期限が迫っています。
</span><span class='line'>
</span><span class='line'>------------------------------------------------------
</span><span class='line'>【サービス】
</span><span class='line'>iOS Development
</span><span class='line'>
</span><span class='line'>【期限】
</span><span class='line'>Tue Aug 20 2013 00:00:00 GMT+0900 (JST)
</span><span class='line'>
</span><span class='line'>【管理者】
</span><span class='line'>nagasawa
</span><span class='line'>
</span><span class='line'>【コメント】
</span><span class='line'>開発用プロビジョニングファイル
</span><span class='line'>
</span><span class='line'>------------------------------------------------------
</span><span class='line'>
</span><span class='line'>更新の手続きをお願いします。
</span><span class='line'>
</span><span class='line'>※更新後はシートの【期限】も更新してください
</span><span class='line'>https://docs.google.com/...
</span></code></pre></td></tr></table></div></figure>
<p>あとは、スクリプトエディタ画面中、[リソース]→[現在のプロジェクトのトリガー…]を開いて、
スクリプトを実行するトリガーとなるイベントの設定をしときます。</p>
<p>[sendMailExpiredServices] [時間主導型] [日タイマー] [午前9時〜10時]</p>
<p>みたいな感じに。</p>
<p>あとは管理したいサービスが増えてもこのシートにどんどん追加していけばおｋ！</p>
<p>これでもう有効期限直前に慌てるなんてこともないはず！
（あとは人間の問題。。）</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Xcode で コードフォーマッター Uncrustify を使う]]></title>
<link href="http://fukulog.github.io/blog/2013/05/22/using-uncrustify-in-xcode/"/>
<updated>2013-05-22T15:01:00+09:00</updated>
<id>http://fukulog.github.io/blog/2013/05/22/using-uncrustify-in-xcode</id>
<content type="html"><![CDATA[<blockquote><p>Source Code Beautifier for C, C++, C#, ObjectiveC, D, Java, Pawn and VALA</p><footer><strong>Uncrustify</strong> <cite><a href='http://uncrustify.sourceforge.net/'>uncrustify.sourceforge.net/…</a></cite></footer></blockquote>
<p>最近iOS開発で使い始めて、良い感じな Uncrustify 。
設定に従って、インデントの数やスペースの取り方など、自動でコードを綺麗に整形してくれます。
似たもので、 perl 版で同じようなことをしてくれるツール <a href="https://metacpan.org/module/SHANCOCK/Perl-Tidy-20121207/bin/perltidy">perltidy</a> とかがあります。</p>
<p>新しいソフトウェアとかでは全然無いんですが、Xcode にスクリプトを設定して任意のタイミングで uncrustify を走らす、
というのが便利だった＆インストール〜Xcodeに設定までが一気通貫でまとまった記事があまり無さそうだったので書いてみます。</p>
<h2>インストール</h2>
<p>homebrew を使っているならこれだけで入ります。
（ちなみに <a href="https://github.com/benoitsan/BBUncrustifyPlugin-Xcode">Xcode プラグイン版</a>もありますが、今回は使いません）</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nv">$ </span>brew install uncrustify
</span></code></pre></td></tr></table></div></figure>
<h2>Xcode から実行するスクリプト</h2>
<p>スクリプトはホームディレクトリの<code>~/bin/uncrustify</code>に、設定ファイルは<code>~/.uncrustifyconfig</code>に置いてます。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nv">$ </span>vi ~/bin/uncrustify <span class="c"># スクリプト</span>
</span><span class='line'><span class="nv">$ </span>chmod +x ~/bin/uncrustify
</span><span class='line'><span class="nv">$ </span>vi ~/.uncrustifyconfig <span class="c"># 設定ファイル</span>
</span></code></pre></td></tr></table></div></figure>
<p>スクリプトは、<a href="http://robertjpayne.tumblr.com/post/9092159751/using-uncrustify-directly-in-xcode-4">Using Uncrustify directly in Xcode 4!</a> を参考にパスなどを変えてます。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#!/usr/bin/ruby</span>
</span><span class='line'><span class="n">base_path</span> <span class="o">=</span> <span class="no">ENV</span><span class="o">[</span><span class="s1">'XcodeProjectPath'</span><span class="o">]</span> <span class="o">+</span> <span class="s2">"/.."</span>
</span><span class='line'>
</span><span class='line'><span class="nb">puts</span> <span class="s2">"running uncrustify for xcode project path: </span><span class="si">#{</span><span class="n">base_path</span><span class="si">}</span><span class="s2">"</span>
</span><span class='line'>
</span><span class='line'><span class="k">if</span> <span class="n">base_path</span> <span class="o">!=</span> <span class="kp">nil</span>
</span><span class='line'> <span class="n">paths</span> <span class="o">=</span> <span class="sb">`find "</span><span class="si">#{</span><span class="n">base_path</span><span class="si">}</span><span class="sb">" -name "*.m" -o -name "*.h" -o -name "*.mm" -o -name "*.c"`</span>
</span><span class='line'> <span class="n">paths</span> <span class="o">=</span> <span class="n">paths</span><span class="o">.</span><span class="n">collect</span> <span class="k">do</span> <span class="o">|</span><span class="n">path</span><span class="o">|</span>
</span><span class='line'> <span class="n">path</span><span class="o">.</span><span class="n">gsub</span><span class="p">(</span><span class="sr">/(^[^\n]+?)(\n)/</span><span class="p">,</span> <span class="s1">'"\\1"'</span><span class="p">)</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="n">paths</span> <span class="o">=</span> <span class="n">paths</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span>
</span><span class='line'> <span class="n">result</span> <span class="o">=</span> <span class="sb">`/usr/local/bin/uncrustify -c ~/.uncrustifyconfig --no-backup </span><span class="si">#{</span><span class="n">paths</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>
</span><span class='line'> <span class="nb">puts</span> <span class="n">result</span>
</span><span class='line'><span class="k">else</span>
</span><span class='line'> <span class="nb">puts</span> <span class="s2">"Invalid base path..."</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>設定ファイルは <a href="http://qiita.com/items/dd7c5ffdff27451dae16">Uncrustifyのセッティング (1) プリプロセッサ編 #uncrustify - Qiita [キータ]</a> が詳しかったので、
使える設定、その説明を見ながら書きます。</p>
<h2>Xcode の設定</h2>
<p>Xcode で<code>Build</code>に成功したタイミングで uncrustify を実行する場合です。
[Preferences…] -> [Behaviors] と進んで、Build の Succeeds を選択し、Run の項目に上で作ったスクリプトを指定します。</p>
<p><img src="http://fukulog.github.io/images/xcode_behaviors.png" title="Xcodeの設定" ></p>
<p>あとは [Product] -> [Build] すると大量に差分が出ます。 差分を見ながら<code>.uncrustifyconfig</code>に指定した設定に従って整形されているのが確認出来ると思います。</p>
<p>それぞれコーディング中は好きな作法で書いても、設定ファイルさえチームで共有しとけば、第三者が見て綺麗なソースが常に保てて便利ですね。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[git hooks を利用したデプロイを導入しました]]></title>
<link href="http://fukulog.github.io/blog/2013/05/16/git-hook-deploy/"/>
<updated>2013-05-16T20:14:00+09:00</updated>
<id>http://fukulog.github.io/blog/2013/05/16/git-hook-deploy</id>
<content type="html"><![CDATA[<p>最近ちょっと開発環境を見直していて、その中の一つとして <strong>git hooks</strong> によるデプロイを導入したので紹介してみたいと思います。</p>
<p>もともとバージョン管理には Subversion を使っていて、今回 git に移行したタイミングで、
git-hooks デプロイを導入しました。</p>
<p>svn から git への移行については今回割愛しますが、 <code>git push origin master</code> とやると自動的に本番にデプロイする方法は、
個人で借りてるサーバでも利用している方法だったので、是非ともやりたかったことの一つ。</p>
<h2>git hooks</h2>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nv">$ </span>tree .git/hooks/
</span><span class='line'>.git/hooks/
</span><span class='line'>├── applypatch-msg.sample
</span><span class='line'>├── commit-msg.sample
</span><span class='line'>├── post-update.sample
</span><span class='line'>├── pre-applypatch.sample
</span><span class='line'>├── pre-commit.sample
</span><span class='line'>├── pre-push.sample
</span><span class='line'>├── pre-rebase.sample
</span><span class='line'>├── prepare-commit-msg.sample
</span><span class='line'>└── update.sample
</span><span class='line'>
</span><span class='line'><span class="c"># 実際に動かすときは</span>
</span><span class='line'><span class="nv">$ </span>mv .git/hooks/post-update.sample .git/hooks/post-update
</span><span class='line'><span class="nv">$ </span>chmod +x .git/hooks/post-update
</span></code></pre></td></tr></table></div></figure>
<p>git には hooks という、updateやreceiveした後など、いくつかのタイミングをフックしてスクリプトを実行出来る仕組みがあります。
svn でもフックスクリプトは使えますが、こちらはコミットに対してフックする感じで、 git の方がタイミングが豊富という印象があります。</p>
<p>これの何が嬉しいかというと、例えば、チームでコード品質やコード規約を守るために、コミットする前にコミットしようとしているコードを必ず validation してNGならコミット中止、
コミット後に diff を通知する、push 受けた際にテストを走らす、などなどをするのに便利です。</p>
<p>今回は <em>push があった際に更新しようとしているブランチごとに実行される</em> <code>post-update</code> を使ってデプロイ作業の自動化を行いました。</p>
<h2>デプロイの仕組み</h2>
<p>（あ、Gitlab使ってます…）</p>
<p><img src="https://cacoo.com/diagrams/5qxrWi2Z5Urv7nB2-A183B.png" title="git-hooksデプロイ" ></p>
<p>今回やりたかったこととして、</p>
<ul>
<li>プッシュしたタイミングでtest、staging、本番、の各サーバに即時にソースを反映させたい</li>
<li>ブランチ毎にWebサーバを切り替えたい</li>
</ul>
<p>があります。</p>
<p>一つ目について、</p>
<p>今まで svn 時代には、<br/>
①ローカルから中央リポジトリにコミット<br/>
②test、stagingサーバにあるワーキングリポジトリ側で中央リポジトリの変更を受け取る（cron に3分毎に <code>svn up</code> するようにセットしていた）<br/>
③stagingサーバに ssh で入ってstagingから手で本番へ反映</p>
<p>のようなフローでデプロイを行なっていましたが、これは git hooks （<code>post-update</code>）を使って自動化することで解決しました。</p>
<p>2つ目について、</p>
<p><code>post-update</code> はタイミング的に <code>post-receive</code> と似ているのですが、複数のブランチへのプッシュがあったときに <code>post-receive</code> が実行されるのが一度だけなのに対して、
<code>post-update</code> はブランチ単位でそれぞれ一度ずつ実行されるという<a href="http://git-scm.com/book/ja/ch7-3.html">特徴があります</a>。
そして第一引数にブランチ名を受け取るのですが、ブランチ名は <code>post-update</code> の中でこんな風に取得することが出来ます。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c">#!/bin/bash</span>
</span><span class='line'>
</span><span class='line'><span class="c"># push されたブランチ名が BRANCH に入る</span>
</span><span class='line'><span class="nv">BRANCH</span><span class="o">=</span><span class="k">$(</span>git rev-parse --symbolic --abbrev-ref <span class="nv">$1</span><span class="k">)</span>
</span></code></pre></td></tr></table></div></figure>
<p>あとは <code>$BRANCH</code> 毎に処理の振り分けをします。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="k">case</span> <span class="s2">"$BRANCH"</span> in
</span><span class='line'> <span class="s2">"develop"</span> | feature*<span class="o">)</span>
</span><span class='line'> develop, feature用の処理
</span><span class='line'> ;;
</span><span class='line'> release* | hotfix*<span class="o">)</span>
</span><span class='line'> release, hotfix用の処理
</span><span class='line'> ;;
</span><span class='line'> <span class="s2">"master"</span><span class="o">)</span>
</span><span class='line'> master用の処理
</span><span class='line'> ;;
</span><span class='line'><span class="k">esac</span>
</span></code></pre></td></tr></table></div></figure>
<p>最終的には <code>rsync + ssh</code> でWebサーバへ送りたい、ので一度 <code>$TMPDIR</code> に checkout してます。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>env <span class="nv">GIT_WORK_TREE</span><span class="o">=</span><span class="nv">$TMPDIR</span> git checkout -f <span class="nv">$BRANCH</span>
</span></code></pre></td></tr></table></div></figure>
<p>checkout したディレクトリに移動して <code>rsync + ssh</code> 。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">cd</span> <span class="nv">$TMPDIR</span>
</span><span class='line'><span class="nv">$RSYNC</span> ./ <span class="nv">$USER</span>@<span class="nv">$HOST</span>:<span class="nv">$DESTDIR</span>/
</span></code></pre></td></tr></table></div></figure>
<p>この方法だと、それぞれの各確認用サーバでは常に最後に push されたブランチが当該Webサーバに反映されていることになります。</p>
<p>アイデア次第でまだまだ面倒な作業を自動化出来そうですが、まだ git による運用自体に慣れてないこともあり、しばらくこれでまわしてみて、
今後運用の中で、また何か改善点など出てきたら共有していきたいと思います。</p>
<h2>tips</h2>
<p>tips というかGitlabを使っていてハマった点なのですが、post-updateスクリプトで tmpdir に git checkout したあと、
勝手にディレクトリが<code>770</code>、ファイルが<code>660</code>というパーミッションになってしまって困った、ということがありました。
post-updateに書いてある内容を手で実行してみてもそんなことにはならず、なんだ？という感じだったのですが、
<code>home/git/.gitolite.rc</code>にこんな記述があり、</p>
<figure class='code'><figcaption><span>.gitolite.rc</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>%RC <span class="o">=</span> <span class="o">(</span>
</span><span class='line'> <span class="c"># if you're using mirroring, you need a hostname. This is *one* simple</span>
</span><span class='line'> <span class="c"># word, not a full domain name. See documentation if in doubt</span>
</span><span class='line'> <span class="c"># HOSTNAME => 'darkstar',</span>
</span><span class='line'> <span class="nv">UMASK</span> <span class="o">=</span>> 0007,
</span></code></pre></td></tr></table></div></figure>
<p>ユーザがログイン後に実行されるコマンド<code>/home/git/gitolite/src/gitolite-shell</code>内で、</p>
<figure class='code'><figcaption><span>gitolite-shell</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># call this once you are sure arg-1 is the username and SSH_ORIGINAL_COMMAND</span>
</span><span class='line'><span class="c"># has been setup (even if it's not actually coming via ssh).</span>
</span><span class='line'>sub main <span class="o">{</span>
</span><span class='line'> my <span class="nv">$id</span> <span class="o">=</span> <span class="nb">shift</span>;
</span><span class='line'>
</span><span class='line'> <span class="nb">umask</span> <span class="nv">$rc</span><span class="o">{</span>UMASK<span class="o">}</span>;
</span></code></pre></td></tr></table></div></figure>
<p>のように指定されているのでした。なので<code>UMASK => 0002</code>にしてディレクトリが<code>775</code>、ファイルが<code>664</code>となるようにして対応しました。</p>
<p>…と書いたのですが、Gitlab5.0からはgitoliteは<a href="http://blog.gitlab.org/gitlab-without-gitolite/">使用しない</a>ようなので、
気にしなくていいかもしれません。ぐぬぬ。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[画面スクロールされたかをGoogle Analyticsのイベントトラッキングに記録する]]></title>
<link href="http://fukulog.github.io/blog/2013/01/11/attachscrolleventtracking/"/>
<updated>2013-01-11T10:29:00+09:00</updated>
<id>http://fukulog.github.io/blog/2013/01/11/attachscrolleventtracking</id>
<content type="html"><![CDATA[<blockquote><p>画面のスクロール位置を、Google Analyticsのイベントトラッキングに記録する。 記録したい要素のidを配列として関数に渡すと、その要素が画面に表示されたときに記録を残す。</p><footer><strong>attachScrollEventTracking</strong> <cite><a href='https://gist.github.com/4490363'>gist.github.com/4490363/…</a></cite></footer></blockquote>
<p>つい最近導入してみたんですが、前回につづきjsネタです。</p>
<p>twitterなどからの流入をなんとか活かせないかと、直帰率を下げる＆回遊率を上げるべく、該当ページの改修をすることに。
しかしコンテンツを見直すにも、そもそも何は見られていて、どこで見切られてしまっているのかの情報が無い状態だったので、
こんなjsを書いてGoogle Analyticsで見てみることにしました。</p>
<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">attachScrollEventTracking</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">eventcategory</span><span class="p">,</span> <span class="nx">pagePartsIdList</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">pageParts</span> <span class="o">=</span> <span class="p">{};</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">windowHeight</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">height</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">pagePartsIdList</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">pagePartsId</span><span class="p">){</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#"</span> <span class="o">+</span> <span class="nx">pagePartsId</span><span class="p">);</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">pageParts</span><span class="p">[</span><span class="nx">pagePartsId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">target</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span><span class="p">;</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'>
</span><span class='line'> <span class="kd">var</span> <span class="nx">isFinish</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"scroll"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isFinish</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">scrollTop</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="o">+</span> <span class="nx">windowHeight</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">isFinish</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">pageParts</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pagePartsId</span><span class="p">,</span> <span class="nx">value</span><span class="p">){</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o"><</span> <span class="nx">scrollTop</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">//console.log(['_trackEvent', eventcategory, 'scroll', pagePartsId, value, true]);</span>
</span><span class='line'> <span class="nx">_gaq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">'_trackEvent'</span><span class="p">,</span> <span class="nx">eventcategory</span><span class="p">,</span> <span class="s1">'scroll'</span><span class="p">,</span> <span class="nx">pagePartsId</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="kc">true</span><span class="p">]);</span>
</span><span class='line'> <span class="k">delete</span> <span class="nx">pageParts</span><span class="p">[</span><span class="nx">pagePartsId</span><span class="p">];</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="nx">isFinish</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>使い方:</p>
<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">// 記録したい要素のidを指定</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">pageParts</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"section-1"</span><span class="p">,</span> <span class="s2">"section-2"</span><span class="p">,</span> <span class="s2">"section-3"</span><span class="p">];</span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">attachScrollEventTracking</span><span class="p">(</span><span class="s1">'tracking_event_category'</span><span class="p">,</span> <span class="nx">pageParts</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>スクロールイベントに対して、指定した要素の位置までスクロールされたかを判定する処理をバインドし、
Google Analyticsに送信しています。結果はどうかな・・・。</p>
<p>手軽に使える感じなので、今後効果測定やページ解析にも使っていきたいと思います。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[スマホでhover効果を実現するjQueryプラグイン]]></title>
<link href="http://fukulog.github.io/blog/2012/12/27/release-jquery-taphover-js/"/>
<updated>2012-12-27T17:45:00+09:00</updated>
<id>http://fukulog.github.io/blog/2012/12/27/release-jquery-taphover-js</id>
<content type="html"><![CDATA[<blockquote><p>スマホの画面タップ時に要素をhoverさせる CSSは、a:hoverの代わりにa.hoverを使う aタグ以外の場合はclassにtapを指定するとCSSで:hoverの代わりに.hoverを使えるようになる</p><footer><strong>jquery.taphover.js</strong> <cite><a href='https://gist.github.com/4282291'>gist.github.com/4282291/…</a></cite></footer></blockquote>
<p>PCではリンクやボタンにカーソルが乗っかったときや押したときの挙動として、スタイルシートで</p>
<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span><span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'><span class="nt">a</span><span class="nd">:active</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span><span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>のようにやりますが、スマホサイトではこれが<a href="http://oshiete.goo.ne.jp/qa/7480431.html">出来ません</a>。</p>
<p>そこでFUKULOGのスマホサイトでもそうですが、</p>
<p><a href="http://minipaca.net/blog/jquery/jquery-de-hover/">jQueryを使ってスマホで:hover効果を実現する | アルパカの具</a></p>
<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">jQuery</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span> <span class="s1">'a, input[type="button"], input[type="submit"], button'</span> <span class="p">)</span>
</span><span class='line'> <span class="p">.</span><span class="nx">bind</span><span class="p">(</span> <span class="s1">'touchstart'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">addClass</span><span class="p">(</span> <span class="s1">'hover'</span> <span class="p">);</span>
</span><span class='line'> <span class="p">}).</span><span class="nx">bind</span><span class="p">(</span> <span class="s1">'touchend'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
</span><span class='line'> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span> <span class="s1">'hover'</span> <span class="p">);</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>のようにjsでaタグやボタンを指定して、要素がタッチされたときに<code>hover</code>や<code>active</code>などのclassを付けることで対応していました。</p>
<p>しかしこれだと、そのページにある無数のaタグやボタンのeventに対して個別にコールバック関数をbindしていくことになり、要素が増えれば増えるほど処理に時間がかかってしまうことになります。
そこでbindするのはwindowのeventに対してのみにし、コールバック関数の中で実際にタッチされている要素を判別するようにしたのが、<a href="https://gist.github.com/4282291">jquery.taphover.js</a>です。</p>
<figure class='code'><figcaption><span>from jquery.taphover.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"touchstart"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="kd">var</span> <span class="nx">bindElement</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">target</span><span class="p">.</span><span class="nx">tagName</span> <span class="o">==</span> <span class="s2">"A"</span> <span class="o">||</span> <span class="nx">$</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">tapClass</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">bindElement</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">target</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">parents</span><span class="p">(</span><span class="s2">"a"</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">bindElement</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">parents</span><span class="p">(</span><span class="s2">"a"</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">parents</span><span class="p">(</span><span class="s2">"."</span> <span class="o">+</span> <span class="nx">tapClass</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">bindElement</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">target</span><span class="p">).</span><span class="nx">parents</span><span class="p">(</span><span class="s2">"."</span> <span class="o">+</span> <span class="nx">tapClass</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">bindElement</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">Hover</span><span class="p">().</span><span class="nx">touchstartHoverElement</span><span class="p">(</span><span class="nx">bindElement</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>あらかじめjquery.taphover.jsを全ページで読み込んでおくだけで、あとは必要に応じて、</p>
<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">article</span> <span class="nt">a</span><span class="nc">.hover</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span><span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>のような感じで、該当する要素に対して適宜スタイルを追加していく、という使い方が出来ます。</p>
<p>今後スマホサイトで全面的に移行していくつもりです。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[FUKULOGのシステム構成・国内IT系各社の開発言語]]></title>
<link href="http://fukulog.github.io/blog/2012/06/06/fukulog-environment/"/>
<updated>2012-06-06T10:49:00+09:00</updated>
<id>http://fukulog.github.io/blog/2012/06/06/fukulog-environment</id>
<content type="html"><![CDATA[<p>こんにちは、FUKULOGのnagasawaです。
ここで軽くFUKULOGのシステム構成について書いてみたいと思います。</p>
<h2>OS</h2>
<p>CentOS（Amazon EC2）を使用しています。</p>
<h2>Webサーバ</h2>
<p>Apache2.2です。EC2の<a href="http://aws.amazon.com/jp/elasticloadbalancing/" title="Elastic Load Balancing">Elastic Load Balancing</a>を利用してロードバランシングをしています。</p>
<h2>アプリケーション</h2>
<p>フレームワークなどは特に使用せず、PHPで独自に実装しています。テンプレートエンジンにSmartyを使用しているぐらいです。</p>
<h2>DB</h2>
<p>MySQL 5.0 で、全文検索Sennaが組み込まれた<a href="http://qwik.jp/tritonn/" title="Tritonn">Tritonn</a>を使用して、コーディネート/アイテムなどに付随する情報の全文検索を行っています。</p>
<p>また一部では、全文検索エンジンライブラリLuceneがベースになっている<a href="http://lucene.apache.org/solr/" title="Solr">Solr</a>を使った全文検索も行なっています。
Tritonn使ってるのになんで？という感じですが、Tritonnだけでは思うようなパフォーマンスが出なかった、という経緯があります。
ただし最近になって、Tritonn本体とは別の原因がありそう…という話も出ていて一度ちゃんと調査してみる予定です。</p>
<h2>開発言語</h2>
<p>PHPです。
ちなみにFUKULOGではブログパーツの提供もしているのですが、こちらはJava（Google App Engine）で実装されていたりします。</p>
<p>と大まかに書いてみましたが、せっかくなので以下に主に国内IT系各社の主要開発言語を調べて（採用情報や開発者ブログ等から）列挙してみました。</p>
<p>※会社単位で一概に開発言語”これ”とも言えないと思うので参考程度に</p>
<hr />
<h3>Ruby</h3>
<ul>
<li>Cookpad</li>
<li>Increments（Qiita）</li>
<li>VASILY（iQON）</li>
<li>Twitter（Scala、Javaへ移行？）</li>
</ul>
<h3>PHP</h3>
<ul>
<li>Yahoo! Japan（米Yahoo!も？）</li>
<li>楽天</li>
<li>GREE</li>
<li>KLab</li>
<li>ドワンゴ</li>
<li>pixiv</li>
<li>nanapi</li>
<li>Facebook</li>
</ul>
<h3>Perl</h3>
<ul>
<li>はてな</li>
<li>NHN（旧ライブドア）</li>
<li>mixi</li>
<li>DeNA</li>
<li>KAYAC</li>
<li>FreakOut</li>
</ul>
<hr />
<p>思いつくまま挙げてみたんですけど、意外にPerl率高めというところでしょうか。
最近のスタートアップに限定してみると、また違う結果になりそうです。</p>
<p>世界的にみると、Pythonが食い込んできたり、Rubyがもう少し多かったりしそうですね。
上場で話題のFacebookでは既存のPHPを独自に高速化（C++に変換）して使ってる、という話も聞いたことがあります。</p>
<p>開発言語は、普通作る”もの”によって最初に決めると思いますが、これから新たに作り始めるとしたら、Ruby on Railsの登場で開発コストが下がったという面で、Rubyが選ばれることが多いんでしょうか。</p>
<p>この際FUKULOGもRubyで…！？（笑）。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[エンジニアブログはじめました]]></title>
<link href="http://fukulog.github.io/blog/2012/05/18/initial-post/"/>
<updated>2012-05-18T11:00:00+09:00</updated>
<id>http://fukulog.github.io/blog/2012/05/18/initial-post</id>
<content type="html"><![CDATA[<p>こんにちは、はじめまして。FUKULOGエンジニアのnagasawaです。
FUKULOGでも開発者ブログを始めることになり、先月入社したばかりのド新人ですが、私が担当することになりました。よろしくお願いします。</p>
<p>初めての記事なので、少し自己紹介を。</p>
<p>最初に触った言語はperlで、今も趣味で何か作ろうとするときにはperlをよく使っています。
FUKULOGの開発言語であるphpの経験は極めて浅く、現在日々勉強中です。。。
業務では主にフロントエンドを担当、既にいくつかの機能の実装をやらせてもらっています。
今後ともよろしくお願いします！</p>
<p>というわけで、開発者ブログを始めるにあたり、FUKULOGの<a href="https://github.com/fukulog">githubアカウント</a>を作るとともに、個人的にも気になっていた<a href="http://octopress.org/docs/">Octopress</a>でのブログ運用を導入してみました。
Octopressの特徴として以下のような点が。</p>
<ul>
<li>MIT License</li>
<li>ruby製</li>
<li>コマンドラインベースでの運用</li>
<li>自由度が高いカスタムが可能</li>
<li>Markdown記法で記事を書く</li>
<li>静的にHTMLが作られる（MTに似てる）</li>
<li>コードの表示が綺麗（→A blogging framework for hackers.）</li>
<li>githubとの親和性が高い（gistの埋め込みも容易）</li>
</ul>
<figure class='code'><figcaption><span>rvmのセットアップ、ruby-1.9.2のインストール、rubygemsの更新</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>bash < <<span class="o">(</span>curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer<span class="o">)</span>
</span><span class='line'><span class="nb">echo</span> <span class="s1">'[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function'</span> >> ~/.bash_profile
</span><span class='line'><span class="nb">source</span> .bash_profile
</span><span class='line'>rvm install 1.9.2
</span><span class='line'>rvm use 1.9.2
</span><span class='line'>rvm rubygems latest
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span>Octopressのインストール</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">cd </span>dev
</span><span class='line'>git clone git://github.com/imathis/octopress.git dev-blog
</span><span class='line'><span class="nb">cd </span>dev-blog
</span><span class='line'>gem install bundler
</span><span class='line'>bundle install
</span><span class='line'>bundle update rake
</span><span class='line'>rake install
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span>ブログのプレビュー</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rake generate
</span><span class='line'>rake preview
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span>ブログのデプロイ</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rake setup_github_pages
</span><span class='line'><span class="c"># Github PagesのリポジトリURLを入力</span>
</span><span class='line'><span class="c"># git@github.com:fukulog/fukulog.github.com.git</span>
</span><span class='line'>rake gen_deploy
</span></code></pre></td></tr></table></div></figure>
<p>Octopressでは、WEBrickというrubyのみで書かれたWebサーバー用フレームワークが使われていて、<code>rake preview</code>するとWEBrick::HTTPServerが4000番ポートで起動します。
Apacheなどの設定をしなくても手元ですぐにプレビュー出来るのはお手軽で良い感じです。デプロイ時に<code>rake generate</code>で自動生成された静的ファイルがgithubにpushされて公開となります。</p>
<p>毎回コマンドラインからプレビューしなくても、
日常、下書きを書きためたり、Markdownをプレビューするときには、<a href="http://kobitoapp.com/">Kobito.app</a>というMarkdown記法をリアルタイムプレビュー出来るアプリ等を使うのも良さそうかなと思っています。
（※KobitoはMarkdown記法のルールが若干異なるので注意が必要）</p>
<p>まだ手探り状態ですが、しばらくはこれで運用してみたいと思います。</p>
<p>今後もFUKULOGの開発のなかで得た情報を共有・発信していきたいと思うので、よろしくお願いします！</p>
]]></content>
</entry>
</feed>