Facebook Twitter Google Maps RSS
formats

HTML5をもっと身近に

こんにちは、陽気なシステム屋です。

 

GoogleからHTML5を簡単に書けるツールが発表されたということで取り上げてみます。

それが「Google Web Designer」!

広告主向けのツールで、webに詳しくない人でも直感的に広告を作成できる…

しかもアニメーションも3Dも使えて、表現はまさに自由自在といったところ

http://www.itmedia.co.jp/news/articles/1310/01/news043.html(ITmediaニュース記事)

 

早速使ってみました

画面はこのような感じです

カラーパレット、テキストボックスはもちろん、

背景をグラデーションにしたり、好きなところにペンツールで描画できるなどなど…

機能の豊富さが滲み出ていますね。

 

角丸も簡単にできます。

 

作成しながらソースを確認したり、プレビューをブラウザで確認できます。

ブラウザはChrome、Firefox、IEの3つを用意…うーん痒いところに手が届く…

 

格闘すること30分…アニメーションが出来上がりました。

※本当はアニメーションなんです、信じてください

使いこなせばもっとすごいものができるはず…

ただソースがものすごく複雑になっていましたので、あまり壮大なものは作れないように思います。

 

イメージとしては、Flashのようなものを想定していただければわかりやすいかと思います。

FlashはiOSだと見られないのでHTML5で表現…時代に沿った進化進化を感じます。

webの広告がますます洗練されていくのではないでしょうか。

 

web制作の実績はこちら

formats

社内の雰囲気

Published on 2013年10月11日, by in その他, 未分類.

どうも!今月から大阪支店にて社内勤務しているなんちゃんです。

 

弊社大阪支店は大阪市中央区にありまして、

少数精鋭で開発業務に取り組んでおります。

Webエンジニア、Android、iOSのアプリエンジニア、基幹系などなど幅広いエンジニアが在籍しております。

 

今回はそんな大阪支店の雰囲気をお届けしようと思います!

 

まずはエントランス(というほどのものではないですが。。。汗)

エントランス@大阪支店

 

大阪支店の顔ともいえる入り口ですね。

写真が上手く撮れずわかりにくですが、鮮やかな赤色でどどんっ!と存在をアピールしています。

 

お次は社内の様子です。

打ち合わせスペース@大阪支店

 

手前の木目の机が、来客時の対応や社内ミーティングなどで利用する打ち合わせスペースです。

写真ではわかりませんが、机の手前にある棚が白と赤でチェッカーフラッグ(笑)みたいになっています。

社内でのスキルアップ勉強会にも利用しています。

 

机の奥にある棚のさらに奥に我々大阪支店メンバーがいる執務スペースです。

常時数名のエンジニアがいますので、お客様からのお問い合わせなどにもすぐに対応できます。

 

また、弊社は東京本社、大阪支店、ベトナム支社の3拠点で、

時間と場所に縛られないシームレスな業務連携を実現するため、

常時接続のテレビ会議システムを導入しています。

テレビ会議@大阪支店

 

時間と場所を限定することなく、開発を行えるため、

お客様のご要望にスピーディに、かつ柔軟に対応することができます。

 

最後に注目度No1の入り口すぐの壁です。

壁@大阪支店

 

壁の中心に、上記のように支店設立記念のメッセージがあります。

そこから枝分かれするように弊社社員が夢や目標を書いています。

非常に意識の高い前向きな言葉が多いので、見ているだけで元気になれます!

どんな内容が書かれているのかは、大阪支店までお越し頂き生でご覧になってください。

 

こんな感じの支店で業務に勤しんでおります。

そんな弊社の開発実績はこちら↓↓

システム開発サイト

formats

iPhone5sの使い心地について

こんにちはー。
iPhone5s/5cが発売されて2週間が経とうとしています。

先日、私もiPhone4sからiPhone5sに切り替えました。
切り替えたことでの操作や感覚の違いを書きたいと思います。

まず発売日について、
iPhone4sの発売日は2011年10月14日。
iPhone5sの発売日は2013年09月20日。
2年も経ってるんですね。
この間にiPhone5の発売もありましたが、この時は4sに満足しており購入しませんでした。
(ちなみにiPhone5の発売日は2012年9月21日)

今回の買い替えにより、LTE回線が使用できるようになりました。
LTEの電波が入らなければ3Gの電波を探すようになり、
電波が無ーい!
と言う状況が少なくなった気がします。
(もちろん使用しているキャリアによっては違いはあるかと思います)

次にiOSが6⇒7になりました。
6になったころは不具合が多々あり今回も不安がありましたが、現在公開されているiOS7.0.2では大きな問題はなさそうです。
操作性も多少の違いはあれど、そんなに違和感を感じません。
4sにiOS7を入れるとキーボードが重くなったりするようですが、5sはスペックも向上しているので問題無しです。
また、現在インストールしているアプリも特に不具合は出ていません。

意外に良いな、と思ったのが指紋認証です。
5sを購入する際には何も感じていませんでしたが、使用してみると認証が非常に快適になりました。
セキュリティも守りつつ操作性が向上するのはありがたいです。
iTunes Storeにも使用できるようで、今後他のアプリなどでも需要が増えそうですね。
複数の指が登録できるのも地味に嬉しいです。

他にも、本体が薄くなり重量が軽くなりました。
iPhone5s
画面:4インチ、1136×640ドット
高さ:123.8 mm
幅:58.6 mm
厚さ:7.6 mm
重量:112 g

iPhone4s
画面:3.5インチ、960×640ドット
高さ:115.2mm
幅:58.6mm
厚さ:9.3mm
重量:140 g

画面でかっ!薄い!軽い!そのまんま(笑)ですが良くなっています。
(画面+0.5インチ、厚さ-1.7mm、重量-28g)

以前の4sでも良いと思っていましたが、いざ5sを購入してみると新しい発見もあり便利機能を探す楽しみがあります。
safariなど始めのうちは使いづらい機能もありますが、そのうち慣れるでしょう。

5から5sの切り替えですと、4sを使用していた私のように目新しさは無いかもしれません。
4sやそれ以前の機種を使っている方は時代の流れを感じることができるかと思いますよ。

iPhone5sよりdocomoも参入し、より利用者が増えることが予想されます。
という事は、そこに関連するアプリの需要も増えるはず。。。

その勢いのある波にどんどん乗っていかなければ!と思うのでした。

ではまた~。

Webサイト開発実績はこちら

Tags:
formats

PHPのフレームワークを検討してみた

Published on 2013年10月2日, by in 未分類.

こんにちは。

今日はPHPのフレームワークについてのお話です。
※ただし、私個人の主観が入りまくりですのでご了承ください。

 

さて、PHPのフレームワークといえば

・Zend Framework
・Symfony
・CakePHP

あたりが有名ですが、最近は

・CodeIgniter
・FuelPHP
・Yii
なんかもよく耳にします。

 

どれも「今最も勢いがある!」とか「今熱い!」とか色々言われていますが、
結局、どれが使いやすいの?ってところで検討してみました。

 

まず大前提ですが、フレームワークというものは初期導入に大きなコストがかかります。

 

考えてみれば当たり前ですよね。
フレームワークのルール(枠)に合わせてコードを書けば、楽に開発できます!!
ってものなので、つまり「ルールを理解する必要がある」ということです。
ルールを理解するメンバのレベルも考慮した上でフレームワークを選ぶ必要があります。

 

この話を踏まえた上で、4つのフレームワークの特徴を見てみます。

・Zend Framework
Zendはとてもシンプルな機能が提供されており、
拡張性も高く、それぞれのプロジェクトにあった基盤も作ることが出来ます。
しかし裏を返せば、その分プログラマがコーディングする量も多くなります。
設計の感覚がしっかりしている人をメインプログラマに据えないと、
保守性が悪いものになってしまう一面があります。

 

・Symfony
SymfonyはZendとは逆に多くの機能を提供しています。
こちらルールに沿った開発をすることによりコスト削減はもちろん、
保守性の高いシステムを作り上げることが可能です。
しかし、機能が多い=覚えることも多いため、初期導入のコストが高くなってしまいます。
また、新しい仕組みを採用していることが多いため、
個々のプログラマのレベルの高さを要求することになります。

 

・CakePHP
Cakeはそこそこの機能とそこそこの自由度があることが特徴です。
Zendほど作りこむ必要もなく、Symfonyほど初期導入コストが高くないので、
個人的には使いやすいフレームワークなのではないかと思います。

 

・CodeIgniter
CodeIgniterはものすごくシンプルなフレームワークです。
Zendよりもシンプル・軽量で、極小規模の開発にはかなり強いと思います。
ただし、大きなシステムを作る場合は、自由度が高すぎるため、
無理にこれを使うより、別のフレームワークを使ったほうがよいでしょう。

 

上記それぞれのフレームワークはver2系や派生のフレームワーク等ありますが、
大体の流れは変わっていないので、今後のフレームワーク選びのご参考までに。

 

ちなみに私はSymfony2が好きです。

formats

iOS7へのバージョンアップに向けて

Published on 2013年9月19日, by in iPhoneアプリ.

こんにちは。

iOS7が本日公開となります。
新型のiPhoneであるiPhone5Sももうすぐ発売となります。

新しいOSが公開されてすぐにでもバージョンアップしたいところですが、その前にしっかりと事前準備を行いましょう。

約一年前にiOS6が公開され直後には、以下のような不具合がありました。
・Wi-Fi設定できない
・連絡先データが消えた
・日本語入力が重くなる、文字変換が遅くなる
・マップが使えるレベルでない
などなど。

特に印象に残っているのはマップの不具合でしょうか。

GoogleMapからApple独自のマップになりましたが、当初は全く使えるものではありませんでした。
パチンコガンダム駅と言う表示には驚いた記憶があります。

今回はこんなことが無いように祈るばかりですが、バージョンアップで使用できなくなるアプリも出てくるでしょう。

少しでもリスクを回避するために、
・バックアップを取っておく
・アップデートを数日ずらして様子を見る
これをするだけでもだいぶリスクを回避できると思います。

新しい機能も追加されて楽しみな部分が強いですが、一度iOS7にしてしまうとiOS6に戻すことは難しいかと
思われるので、慎重にバージョンアップをしたいものですね。

ではまた~。

Webサイト開発実績はこちら

Tags:
formats

バックグラウンド実行してみる

Published on 2013年9月18日, by in 開発全般.

 

こんにちは!

 

今日はバックグラウンド実行についてです。

最近、こんなコマンドを目にしました。

 

$ php test.php &

 

「&」って…なんだろう…( ゚д゚ )

 

これ、バックグランウド実行を指定しています。

実行したターミナルが途中で落ちても、

test.phpの処理が終わるまで裏側で実行し続けます。

ちょっと実践してみましょう。

 

フォアグラウンド実行で、100秒sleepする。

$ sleep 100

 

別のターミナルを開いて実行中のプロセスを確認する

$ ps aux | grep sleep

user 6517 0.3 0.0 5020 492 pts/1 S+ 12:08 0:00 sleep 100

うんうん、実行されていますね。 ここで実行したターミナルを落とします。

 

もう一度実行中のプロセスを確認する

$ ps aux | grep sleep

 

先ほどのsleepのプロセスがなくなっています。

 

今度はバックグランド実行で、100秒sleepする。

$ sleep 100 &

 

別のターミナルを開いて実行中のプロセスを確認する

$ ps aux | grep sleep

user 6590 0.0 0.0 5020 520 pts/0 S 12:10 0:00 sleep 100

おぉ、動いてます。ここでも実行したターミナルを落とします。

 

もう一度実行中のプロセスを確認する

$ ps aux | grep sleep

user 6590 0.0 0.0 5020 520 ? S 12:10 0:00 sleep 100

ちゃんと実行され続けていますね(*´∀`) (´∀`*)

 

バックグラウンド実行ってなんだろうとおもいますが、

試してみると実感がわくかもしれません。

 

ではまた!

Webサイト開発実績はこちら

Tags:
formats

JavaScriptをはじめから丁寧に。

Published on 2013年9月17日, by in 開発言語.

 

こんにちは。
陽気なシステム屋とは相反する私が今日は書かせていただきますがご了承ください。

最近サーバーサイドの言語を使わずにJavaScript(以下JS)でWeb画面を作成する機会が多くあり、
その時に私がお世話になったWebサイトなどなどを共有したいと思います。(やっと自分のPocketの整理ができるぜ~)

ではさっそくスタート!

■JSで最初に躓くのは”this”の扱いかなって思うのでこれとかが参考になりそうです。
https://dev.mozilla.jp/2010/05/js-blockscope-and-namespace/
“this”の扱いだけでなくスコープの説明なんかも様々な書き方を用いてわかりやすく解説されています。

■更にJSで躓きやすいのは関数の書き方がたくさんあるってことかなと思います。
そういう場合はコレとかがよさそうです。
http://d.hatena.ne.jp/dhrname/20121208/p1
http://d.hatena.ne.jp/kayai/20110131
「即時関数」と「通常の関数」2種類の方法でモジュール化する書き方を紹介していたり、
クロージャやprototypeについてもコードと共に丁寧な説明が添えられていているので理解しやすいです。

■もう少し慣れてくるとココらへんが良いかもしれません。
http://nmi.jp/archives/488
JSではパターン化されている文字列を数値化する書き方や論理演算の書き方など、多くのイディオムが並べられています。

■更にレベルアップしたものとしてはコレでしょうか。
http://mitsuruog.github.io/javacript-style-guide/
先ほどのサイトより多くのイディオムやJSのスタイルガイドがデザインパターンとアンチパターンを比較して記述されています。
記事自体もJSのオブジェクトとして書かれているところがいいですね。

■もっと言語仕様から知りたいって人にはこの書籍が一番なんじゃないかと思います。
http://www.oreilly.co.jp/books/9784873115733/
オライリーから発売されているJavaScript 第6版(通称:サイ本)です。コレまでに書いてきた内容はもちろん、EcmaScript3と5の仕様変更についても詳しく書かれていたりと800P超のボリュームですが電子書籍でも販売されているので時間のあるときにパラパラ見るのもいいんじゃないかと思います。

■実際にJSを書くにあたって利用したツールはこれです。
http://www.jslint.com/
JSLintはJSの構文が正しくかけているかっていうのをチェックしてくれます。
Webサービスだけでなく、私の場合はSublime Text 2のプラグインを使用しています。(Node.jsのインストールが必要)
間違った書き方や理想的でない書き方をするとわかりやすいようにマークを出してくれます。しつこいぐらいにです。
これで一目で間違いに気づけますね。

もっと便利なツールはたくさんあると思いますが
今回はこれだけで十分でした。
これいいよってツールが有りましたら紹介してください。

ざっと並べてみましたが如何だったでしょうか。
いやぁー、JSって本当に良いもんですね。

システム開発実績はこちら

Tags:
formats

わからない技術を調べる時に注意すること

こんにちは。
陽気なシステム屋の一員のシホンヌです。

只今JavaFXを使って絶賛開発中です。

今までJavaで開発をすることが多ございましたが、JavaにFXがついたものは扱ったことがなく、ハテどんなものかと調べながら開発を進めています。
こういうことをしたい時はこのクラス使えばいいかしら~、と記憶を手繰り寄せながら、そしてグーグル先生のお世話になりながら…。

でも今日、グーグル先生にやられました。

メッセージダイアログを出したい時って、なんていうクラス使うんだったかしらと検索したら、検索結果の一番上に「JavaFX2でのダイアログ表示は自分で実装しなきゃダメよ。SwingのJOptionPaneに相当するクラスがないの。」的なことが書いてあり、ショックを受けました。

一言のメッセージとOKボタンを表示したいだけなのに、こんだけの画面定義やクラスがいるなんて…!
ひぃぃぃぃ~!

そう思いながら、サンプルを真似してダイアログを表示させることに成功しました。

でも…なんか納得できない。
こんなに手間かけなきゃいけないわけがない。
時間かけて作ったわりにはダイアログのデザインがしょぼい。

もう一度、グーグル先生に聞きました。
今度は検索する言葉を変えて。

そうしたら…

JavaFX2でJOptionPaneクラスを使って簡単にダイアログ表示をしている人発見!
早速真似してみたところ…
できた!
できました!!
JOptionPaneクラスのshowMessageDialogやshowConfirmDialogを使って、簡単にダイアログを表示することができました!

なんで最初の検索結果を鵜呑みにして進めてしまったのだろう…。
というか、私の理解が足りてなかった…!?

後悔でいっぱいです。

わからない技術を調べる時は、色々な言葉で検索して、色々な情報を集めてから試さないといけないなと改めて思い知らされました。

でもおかげで、こういうやり方もあるのか、とか、これをやったおかげでこういう仕様になった場合はこれを使えばいいな、ということがわかって良かったなとも思いました。
ひとつ知識を得た13日の金曜日でした。

 

システム開発実績はこちら

Tags: ,
formats

Googleアナリティクスレポートを自動化しちゃう方法

こんにちは。

 

社内のサイトを複数管理されているWEB担当者で、解析ツールの数値を

毎朝確認するのがめんどくさいんだよね。。。って

方は結構多いのではないでしょうか。

 

管理画面でみるだけだから別に面倒くさくない~、って方は読み飛ばしちゃってOKですが、

アナリティクスのデータをエクセルにわざわざ貼り付ける、

なんてゆ~見るからに手間な作業をしてる方がいたら必見です。

 

複数のプロパティにまたがったGoogleアナリティクスのデータを、ファイルを開くだけで

1ページにまとめてくれ、さらにはグラフまで作成してくれちゃう便利な機能、

その名も

『Google analytics Data Fetch Function』

です。

(他の有料・無料のツール使ってる方はごめんなさい。。。)

 

【手順】

1.Google Spreadsheetで自動計算させるための、スクリプトをインストール

「挿入」のメニュー内にある「スクリプト」があります。

インストールしようとするとなんやかや警告画面が出ますが、気にせず「Authorize」しましょう。

 

2.GoogleアナリティクスのTOKENを取得

ためしにGoogle Spreadsheetで以下の数式をA1セルに入力してみましょう。

=getGAauthenticationToken(“ID”,”Password”)

※IDとPasswordはご自分のを入れてくださいね。

 

3.アナリティクスのProfileIDを入力

アナリティクスの管理画面に記載のある、ProfileIDをB1セルに入力しましょう。

 

4.魔法の数式を入力

=getGAdata(A1,B1, metrics, startDate, endDate, filters, dimensions, segment, sort, includeHeaders, maxRows, startFromRow)

※TOKEN、Profile ID、metrics、startDate、endDateのみ必須項目です。

 

5.dimensionsを指定する

dimensionを変えることにより、必要な数値を引っ張ってこれます。

ユーザー数:visitors

訪問数:visits など

例えば、以下の関数だと

=getGAdata(A1,B1,20130801,20130831,visitors,,,,,)

2013年8月のユーザー数の合計が出てきます。

他にもsegmentを組合せたり、日別で出したりなど、、、もろもろ工夫してうまく使ってください。

 

グラフを設定しておけば、開くだけで簡易なレポートができたりなど、してなかなか重宝します☆

是非試してみてくださいね。

 

formats

このコメントいる?いらない?

Published on 2013年9月5日, by in 開発全般.

こんにちは。
あっという間に9月になっていますね。

今日はプログラムのコメントにの書き方についてです。

処理の中に書くコメントは、作成者以外の人が確認の際の手掛かりにもなります。
もちろん作成者にとっても後から見返した際に参考になります。
意味のあるコメント、意味の無いコメントとあるのでその具体例を見てみます。

Javaで簡単に書いてみます。

パターン①—————————————
// 商品1の価格
int goods1 = 1000;
// 商品2の価格
int goods2 = 1500;
// 商品3の価格
int goods3 = 2000;
// 合計した価格
int total = goods1 + goods2 + goods3;
————————————————-

パターン②—————————————
int goods1 = 1000; // 商品1
int goods2 = 1500; // 商品2
int goods3 = 2000; // 商品3
// 合計
int total = goods1 + goods2 + goods3;
————————————————-

パターン③—————————————
int goods1 = 1000;
int goods2 = 1500;
int goods3 = 2000;
// 合計 = 商品1 + 商品2 + 商品3
int total = goods1 + goods2 + goods3;
————————————————-

処理自体は簡単なものなので③で十分かと思います。
何をしたいのかも伝わります。

②のように右に書くことでスッキリ見ることができます。

①は行数も多くなってしまいますし、1行1行だらだら書くと手間もかかりますし意味の無いコメントが
多くなります。

作業を行うプロジェクトのコーディング規約を把握してと言う前提ではありますが、コメントはどんな
処理を表現しているのかを教えてくれる手掛かりになるので、レビューする方にも気を付けて見て
もらいたいです。

また、日本語で説明する力が必要となりますが、色々なプログラムを見たり組んだりしていれば自然と
慣れてくると思います。

最後にこれだけは勘弁と言うコメントをご紹介。

おまけ——————————————-
int goods1 = 1000;
int goods2 = 1500;
int goods3 = 2000;
// 合計 = 商品1 + 商品2 + 商品3
// たぶんこれであっているはず。。。
int total = goods1 + goods2 + goods3;
————————————————-

作った人が分からないようなコメントを書いてしまうと、その他の人が分かるわけありません。
気を付けましょう。

ではまた~。

Webサイト開発実績はこちら