2016年1月29日金曜日

スマホで写真を投稿したら・・・ひっくり返って表示された!

「スマホで写真を投稿したら・・・ひっくり返って表示された!」



なんてことに出会ったことはありますか?

写真のデータの中には、写真の情報はもちろんですが、
どういう風に写真を撮ったのか、というデータも持っています。

-スマホを縦にして写真を撮ったのか、横にして写真を撮ったのか。

といった情報です。

この情報を正しく扱ってあげないと、Web上で写真を表示するときに、
ひっくり返ったり、横向きになったりしてしまうのです。

デジカメ画像の規格として、Exif(イグジフ)というものがあります。
※詳しくは、http://e-words.jp/w/Exif.html

この規格を採用しているカメラ(スマホカメラ含む)の場合、
写真以外に様々なデータが、付加情報として記録されます。

この付加情報を持っている写真データの場合は、
その情報を考慮し、写真を保存してあげないと、ひっくり返ったり、横向きになったりしてしまうのです。

iPhoneのカメラで採用されていることもあり、開発する際に遭遇することもあると思うので、
付加情報の確認とその修正のサンプルを載せておきます。

もちろん、C#です。

private void CheckProperties(string _path)
{
 // 対象の写真を開きます
 System.Drawing.Bitmap origin = new System.Drawing.Bitmap(_path);

 // 画像の回転度合の設定用
 System.Drawing.RotateFlipType rotation = System.Drawing.RotateFlipType.RotateNoneFlipNone;
 // 開いた写真の情報を順に確認します。
 foreach (System.Drawing.Imaging.PropertyItem item in origin.PropertyItems) {

  // 写真の向きの情報は、0x0112というIDに割り振られているので、このID以外はすっ飛ばします
  if (item.Id != 0x0112)
  {
   continue;
  }

  // IDが0x0112の時なので、向きの情報が取れる場所
  switch(item.Value[0])
  {
   case 1:// 不要(回転・反転なし)
    break;

   case 2:// 水平方向に反転
    break;

   case 3:// 時計回りに180度回転
    // 時計回りに180度回転しているので、180度回転して戻す
    rotation = System.Drawing.RotateFlipType.Rotate180FlipNone;
    break;

   case 4:// 垂直方向に反転
    break;

   case 5:// 水平方向に反転+時計回りに270度回転
    break;

   case 6:// 時計回りに90度回転
    // 時計回りに270度回転しているので、90度回転して戻す
    rotation = System.Drawing.RotateFlipType.Rotate90FlipNone;

    break;

   case 7:// 水平方向に反転+時計回りに90度回転
    break;

   case 8:// 時計回りに270度回転
    // 時計回りに90度回転しているので、270度回転して戻す

    rotation = System.Drawing.RotateFlipType.Rotate270FlipNone;

    break;

   default:    break;

  }

  // といった感じで、item.Value[0]の値で、どんな状態なのかが分かるのです。
  // あとは、この値を元に処理をしてあげればOK
  // 上記の3、6、8には正しくする処理を記載しましたので、参考にしてみてください

 }



 // 画像を複製して、回転を正す
 System.Drawing.Image rotated_image = (System.Drawing.Image)origin.Clone();

 // 複製する際のフォーマット(元の画像と一緒にする)
 System.Drawing.Imaging.ImageFormat format = origin.RawFormat;

 // オリジナルの画像から、欲しいものは奪えたので、閉じちゃう
 origin.Dispose();

 // 指定された角度だけ画像を回転する
 rotated_image.RotateFlip(rotation);

 // 回転を正したものを、指定のパスに保存
 try
 {
  rotated_image.Save("新たな保存先", format);
 }
 catch(Exception ex)
 {
  rotated_image.Dispose();
 }
 finally
 {
  rotated_image.Dispose();
 }
}

2016年1月28日木曜日

開発初心者がこれだけは知っておいた方が良いこと①

こんにちはSです!

前回、自己紹介でも書きましたが、わたしは7ヶ月前まで本当に何も知らず、
分からない事だらけでした。
(ブラウザって何?アマゾンって本屋さんじゃないの?!という状態でした。
本当にごめんなさい。。。)

そこで今回は「最初にこれを知ってたらもっとラクだったかも」と思うことを思い出しながらまとめます。

基本中の基本なのでベテランの方々は読み飛ばすか、
もしくは次に新人さんが入ってきたときに、こういうところにつまづくんだな~という参考にしてみて下さい。


◆勘違いポイント
わたしがはまった勘違いポイントです。
きっと誰でも最初に一度ははまるのではないでしょうか。。。?わたしだけ??

①JavaとJSは別物・・・
 先輩たちがJSといっているものはJava Scriptという言語のことであり、Javaとつきますが
 Javaとは完全に別物です。

②JSとjQueryも別物・・・
 「jQueryはJSで書くと何十行にもなるものを少ない行数で書けるようにまとめたライブラリだよ」
 と教わったので、わたしは「jQueryはJSの短い版でほとんど一緒なんだ!」
 という拡大解釈をしていましたが、書き方が違います。
 なのでjQueryオブジェクトをJSの書き方で動かそうとしても全く動きません。。。

◆最初のつまづきポイント
①{ }の中で定義した変数は{ }の外で使えない←当たり前

②分からないことがあってもどんなワードで検索すれば良いのか良く分からない
 →「やりたいこと C#」とかで調べてみるけどやりたいことの表現が適格でないと全然欲しい結果が返ってこない
 →もういっそ先輩に「こういうことがやりたいんですけど、なんてググったら良いですか?」と聞いた方が早い

③もともと用意されているメソッドと自分(の会社の人)が作ったメソッドの違いが分からない
 →オリジナルのメソッド名でググるけど何も出てこない。。。
 →オリジナルのメソッドはそのページ内、もしくは継承しているページのどこかで定義しています


◆先に知っておいた方が良いVisual Studioの機能
①Ctrl + スペース で携帯の予測変換みたいなことができます
 →ちょっと意味が分からないと思いますが、とりあえずやってみて下さい

②メソッドの上でF12を押すとそのメソッドを定義しているところに飛べる

③変数やメソッドの上でダブルクリックして少し待つと、同じ名前を使っているところの背景がグレーになります
わたしはせっかちすぎて1ヶ月くらい気づきませんでした



◆番外編(便利なショートカットキー)
営業からシステムに異動になり、色々と教えて頂く中でショートカットキーも教わり
非常に感動しました!
今までなんて非効率なことをしていたんだろう。。。

開発初心者の方はこれからバンバン開発をしていく上で、非常に業務効率があがると思うので
ぜひ使ってみてください♪

ステップ1 ~結構誰でも使ってる?~
Ctrl + C コピー
Ctrl + V ペースト
Ctrl + X 切り取り
Ctrl + A 全選択
Ctrl + S 保存
Ctrl + Z 戻る
Ctrl + Y 進む

ステップ2 ~知らなかったらすごく感動する~
Alt + Tab  画面の切り替え
田 + E   エクスプローラーを表示
田 +  →  画面の右半分に表示
田 +  ↑  最大化
田 +  ↓  最小化

他にも色々あるようですが、このへんがオススメです!
ベテランエンジニアの方々はきっともっと知ってるはずので聞いてみて下さい。





定数の新しい行です エラー

こんにちは山田です。

(ちなみに開発言語:C#の話)

本日もカタカタとプログラミングをしている中 
文字の置き換え(String.Replace)を行おうと思ったら見慣れないエラーが
 

「定数の新しい行です。」

ちょっとわからなくグーグル先生に聞いてみました。
どうやら調べてみると¥の文字に原因があるようでした。
 解決方法としては2パターン見つかりました↓

■解決方法①

 \を直接書かず
System.IO.Path.DirectorySeparatorChar; を使う
tempFileName1.Value.ToString().Replace("/", "System.IO.Path.DirectorySeparatorChar;");
■解決方法②
 "\"の前に@を付ける
tempFileName1Value.ToString().Replace("/", @"\");
■解決方法③

 \\と書く
tempFileName1.Value.ToString().Replace("/", "\\");
結局は方法②を取りました。

【Android】AppIndexingを実装してみた

こんにちは。エンジニアのKです。
アプリへの新しい導線口だけでなく、SEOにも効果があると言われているAppIndexingを
遅ればせながら実装してみました。

AppIndexingについて

ざっくり言うと、Google検索結果にアプリコンテンツへのリンクが表示されるようになります。
Cookpadさんの場合、こんな感じで表示されます。


アプリがインストールされていれば、アプリ内のコンテンツ(この場合「大根」レシピの検索結果画面)が、まるでwebページへの遷移のようにシームレスに行われます。
アプリがインストールされていない場合、Google Playストアのダウンロードページヘ遷移します。便利ですね。

アプリリンクの表示条件は?

実装にあたって、どんな挙動になるか、先駆者様のアプリで見てみようと思ったのですが、
なかなか上手く行かずに苦労しました。
AndroidはGoogleアカウントでログインしていなくても表示されるらしいのですが、なかなか表示されず。。
とりあえず、対象アプリをインストールしたGoogleカウントでログインしたら、表示されるようになりました。
※ Androidバージョンやブラウザアプリのバージョンにもよる違いもあるかもです。


AppIndexingを実装する

公式ドキュメントに従って実装していきますが、試行錯誤した点について補足していければと思います。
 サンプルコードは、公式ドキュメントにも出てくるandroid-deep-linkingプロジェクト(com.recipe-app)を使います。

 

インテントフィルタの追加

まず、アプリ内のコンテンツに直接遷移できるディープリンクをサポートする必要があります。
http://recipe-app.com/recipe/{recipeId}といったwebページでレシピ詳細を表示する機能があった場合、
同等の機能を持ったアプリのActivity(.RecipeActivity)に、以下の様なintent-filterを追加します。(AndroidManifest.xml)
        
            
                
                
                
                
                
            
            
                
                
                
                
                
            
        

HTTPスキームとカスタムスキームどちらかだけでもいいですし、両方設定してももちろん大丈夫です。
要は特定のURLでインテントが飛んだ時に、アプリが反応できるようになっていれば良いということですね。
Googleは実装手順が簡素になるということから、HTTPスキームを推奨しています。

ディープリンクのURIに対応する処理をActivityに実装

 intent-filterを追加したことにより、http://recipe-app.com/recipe/pierogi-poutineといったURLで.RecipeActivityが起動するようになります。
.RecipeActivityはレシピ詳細を表示するアクティビティですので、対象となるレシピIDが必要になります。
アプリ内遷移であれば、前画面から飛ばすintentにputExtraしてレシピIDを渡すのが一般的かと思いますが、
ディープリンクの場合、intent.getDataString()で取得できるURLをパースして、レシピIDを取り出して、後続の処理に渡すようにします。

    protected void onNewIntent(Intent intent) {
        String action = intent.getAction();
        String data = intent.getDataString(); // http://recipe-app.com/recipe/pierogi-poutine
        if (Intent.ACTION_VIEW.equals(action) && data != null) {
            String recipeId = data.substring(data.lastIndexOf("/") + 1); // pierogi-poutine
            // レシピ情報を取得して、表示する処理
            Uri contentUri = RecipeContentProvider.CONTENT_URI.buildUpon().appendPath(recipeId).build();
            showRecipe(contentUri);
        }
    }


ディープリンクをGoogleに知らせる

ここまでで、アプリがディープリンクに対応し、Googleの検索結果から直接アプリへ遷移できるようになりました。
あとは、対応したディープリンクをGoogleに教えて、検索結果に表示するようにしてもらいましょう。
教える方法は、
  1. AppIndexing APIをアプリに実装
  2. 対応するwebページのmetaタグにディープリンクを指定
  3. sitemap.xmlに記述する
があります。2,3はアプリに対応するwebページを持っている前提となります。
できれば全て対応したほうが、インデックスされやすくなりそうですね。

また、Googleにディープリンクを知らせる際のURLは、以下の様なフォーマットで記述します。
android-app://{package_id}/{scheme}/{path}
上記で対応したディープリンクの場合、
android-app://com.recipe-app/http/recipe/pierogi-poutine
android-app://com.recipe-app/recupe-app/recipe/pierogi-poutine
となります。

AppIndexing APIで知らせる

公式ドキュメントにあるとおり、build.gradleとAndroidManifest.xmlに設定を追加し、ActivityのonStart(), onStop()でAPIを実行します。
公式ドキュメントにあるコードでは、タイトルとwebのURL、アプリのURLを設定していますが、
以下のように書くと、概要(description) も合わせて送信できるようになります。
※descriptionがどのように評価され、利用されるかは不明

    mClient.connect();

    String title = "タイトル";
    String description = "概要";
    Thing object = new Thing.Builder()
        .setType("http://schema.org/Thing")
        .setName(title)
        .setDescription(description)
        .setUrl(APP_URL)
        .setId(WEB_URL)
        .build();
    Action viewAction = new Action.Builder(Action.TYPE_VIEW).setObject(object).build();
    AppIndex.AppIndexApi.start(mClient, viewAction);

タイトルや概要にマルチバイト文字が含まれる場合、URLエンコードする必要は無いのかな?と迷いましたが、エンコードは不要でした。
公式ドキュメントのApp Indexing API 呼び出しをテストするで見た時、コンソールに文字化けして表示されますが、
リリース後にSearch ConsoleでFetch as Googleで見たところ、正常に日本語が認識されていました。


Webページのmetaタグで知らせる

http://recipe-app.com/recipe/pierogi-poutineのheadタグ内に、以下のmetaタグを追加します。

<html>
<head>
...


...
</head>
...
</html>

sitemap.xmlで知らせる

http://recipe-app.com/recipe/pierogi-poutineの要素にlink要素を追加します。
...

  http://recipe-app.com/recipe/pierogi-poutine
  
  

...


以上で実装編は完了です(長い)。
次回はGooglePlay DeveloperConsoleやSearchConsoleで必要となる設定についてまとめられたらと思います。

まとめました => 【Android】AppIndexingを設定してみた




2016年1月27日水曜日

GoogleのAMP(Accelerated Mobile Pages)ってすごいの?

AMP(Accelerated Mobile Pages)とは・・・


Z-MENです。
どうも。

昨年夏頃?からモバイルやSEO界隈でAMPの話題がすごく盛り上がっていて、
モバイル担当としてもやはり気になるところなので一度情報を整理してみたいと思います。

自分の勉強がてらではありますが、どなたかの参考になれば幸いです。
AMPとは、からAMPの実装・確認までまとめてみます。

AMP(Accelerated Mobile Pages)とは?

AMPはAccelerated Mobile Pagesの略称です。
GoogleとTwitterが共同で立ち上げたAMPプロジェクトのオープンソースらしいです。
簡単に言うとAMPに対応した記事コンテンツをGoogle側が勝手に読み取り、キャッシュして、
超高速に優先表示してくれます。モバイルの場合のみ出てくるようですが、カルーセル形式でずらっと並べてくれます。

去年末くらいからモバイルで検索した際に、一部記事がカルーセルで表示されるようになりましたが、あんな感じのイメージで、表示が超高速になる、という感じです。

【g.co/ampdemo】でAMPをデモ体験

Googleさん、ちゃんとデモも用意してくれていて、Googleの検索窓に『gco/ampdemo』といれると
AMPのデモ表示モードに切り替わります。ほんと爆速です。


 AMPの実装について

AMPの実装方法を見てみましょう。
GitHubにもあるんですが、全部英語でオエッとなるかたは参考になれば。

AMPは専用のjsライブラリとbilerplate(いけてるテンプレみたいの)で動くとのこと。
超シンプルに書くとこんな感じになりますと。

  
    Hello, AMPs
    
    
    
    
    
  
  
    

Welcome to the mobile web

 

マークアップ上の注意点としては、

    • <html>タグを<html amp>と書く?
    • <head> 内に<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>をいれる
    • <head>閉じ直前にを<script async src="https://cdn.ampproject.org/v0.js"></script>をいれる
    • 画像を入れるときはこんな感じ<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
    とかとか、基本はこんな感じなのですが、普通にHTMLでページ作ればOKというわけでもなさそうです。
    公式のGetStartにいくつか注意事項があるので貼っておきます。
    AMPプロジェクト公式
    AMP GitHub

    日本語版の導入ガイドも発表されたようです。
    AMP日本語版導入ガイド

     AMPの条件・制約 

    AMPには、爆速を得られる代わりにいくつか制約があります。
    この制約がやや影響が大きく、導入できない方も多いかもしれません。

    1. AMPのランタイムはAMPのCDNから固定のURLで配信
    2. Javascriptが使えない(JSON-LDのみ)
    3. 画像・動画は大きさの固定指定が必要
    4. 広告はiframe経由で表示
    5. フォーマットを遵守
    6.  link要素はrel:canonical以外禁止
    7. ほかimgとかformとかinputタグも使えないかも
    とのこと。これ特に②がでかい、トラッキングができない・・・。
    『AMP実装したから効果が楽しみだぜー!』と思っても効果の程がわからない・・・
    そしてどうもレスポンシブにもうまく対応してない模様。。。厳密にはレスポンシブの実装方法による、ということででしょうか。ちゃんとCSSとかでdevicewidthで判別してればいいんでしょうが、jsでUserAgentみて~とかやってるとアウトなんでしょうね。
    レスポンシブを推奨しておきながらレスポンシブでは使えないかもってどうなのよ。
    そしてとどめの⑥⑦・・・まじか。
    とにかく新しいものやっとけ!と飛びつかずにGoogleが修正やら本腰入れた公表をするまでは
    いったんステイが間違いないかも、が現時点でのわたしの見解です。


    2016.02.03追記
     広告とGAについては対応されることが発表されたようですね。
     まずは最低限の機能は揃えてくれた、というかんじでしょうか。他のアクセス解析が
     使えないのは相変わらず痛いんですが・・・。
    AMPが広告とGoogleアナリティクスをサポート開始

     AMPの確認方法

    先日SearchConsoleでAMPが確認できるようになりました、とアナウンスがありました。
    とりあえず実装してみた!というかたはいてみましょう。
    公開しなきゃわからんよ、ってことね・・・。
    Googleウェブマスターブログ:Search Console における AMP エラー レポートのプレビュー 

     終わりに

    GoogleのAMPの説明を直接聞いたり様々な記事に目を通したりしてきましたが、所感として、モバイルフレンドリーの基準として表示スピードがいよいよ本格導入されるか?な話もあり、AMPを通してモバイルでの表示スピードに対するGoogleの本気度みたいなものは感じました。





    アプリのプロトタイピングツールを使い倒してみる① -プロトタイピングとはー

    こんばんは、おかだです。



    昨年の話になってしまうのですが、Googleさん主催の「Google for Mobile」というイベントに参加してまいりました。

    イベントでは、スマホに限らずさまざまなモバイル端末周辺にまつわる最近のお話を
    たくさんのスピーカーの方から聞けるセッションがたくさん設けられていて

    中でもウェアラブル端末や仮想現実のお話が非常に興味深かったです。

    個人的には購入したばかりだったChrome Castが、スタイリッシュにアップグレードして
    発売されるというお話がショックでした。
    うちのテレビ、HDMI端子を画面に垂直に差し込むタイプなので、以前のCastちゃんでは
    壁方向に端末のお尻が突出してしまうので、接触とか壁との隙間とかが結構気になっていたんですよね。

    しかたないので、気が向いたら新しいCastちゃんを購入しようかと思います。

    Chrome Cast、持ってると本当に便利でたのしいので、オススメです!



    あたらしいアプリをつくることになりました


    Google For Mobile では、アプリ開発に関するお話もたくさん聞けました。

    音楽がきけるアプリ「AWA」のデザイナーさんの、実際にAWAを作った時のお話もとても参考になったので、こんどあたらしいアプリを作る時にぜひ意識していきたいと思いました。


    なんですが今日書きたいのはその話ではなくて、プロトタイピングツールのおはなしです。


    プロトタイピングとは


    プロトタイピングは、アプリの設計段階で画面のイメージや動きを実装する前にみんなで共有するための素敵な手段です。

    WEBのデザインと違って、アプリの場合は見た目だけではなく
    アニメーションの動きなども伴ったユーザー体験が大事になってくるので
    そのへんのいろいろを含め、作ってしまう前にみんなで共有したいよね!ということです。

    "動き付きのモック"っていうイメージでしょうか。。



    最近は簡単にプロトタイプをつくれる便利なツールがあるらしい


    プロトタイピングについていろいろ調べると、けっこう書いてあります。

    「あまり時間をかけないことが大事」



    あくまでイメージの共有手段でしかないので、そこに時間かけるのは本題じゃないよね、ということでしょう。


    なので、世の中のやさしい人たちが作ってくれた「プロトタイピングツール」をつかって
    新しいアプリのプロトタイプを作ってみようと思います!


    ツールには、無料のものから有料なものまで、お手軽なものから本格的なものまで
    海外のものをあわせると10サービスくらい有名なものがあるみたいですが

    今回は「Pixate」というツールを使って、いろいろ試してみたいと思います!




    、、、というのは、「Pixate」のお話が冒頭のイベントで紹介されていたからなのです
    (残念ながらそのセッションは私は聞いていなかったのですが、、、、汗)



    プロトタイプが会議で役に立つといいなぁ。




    ちなみにおかだはアプリの開発者ではないので、わからないこともありそうで結構ドキドキしています。

    次回インストールから始めてみたいと思います!




    わくわく!


    【2016/02/05 追記】
    コメントでもご要望をいただいたのですが、数あるプロトタイピングツールをいろいろとご紹介するのも
    おもしろいかも!ということで
    次回からは「実際に使ってみた」シリーズを何回か連載したいと思います!

    早速ですが次回は「POP」と「InVision」の2つをご紹介していきます~~~

    2016年1月25日月曜日

    MARSとは?

    こんにちは山田です。
    SQLのクエリを見ている時にわからない単語があったので調査しました。
    その備忘録になります。

    ■ちなみに私の開発環境
    ASP.NET:2.0
    SQL Server:2005

    ■MARSとは?

    さて、さっそくMSDNに記述がありホットしました。
    Multiple Active Result Sets(MARS)

    SQL Server 2005から搭載された機能で、
    複数のアクティブな結果セットが得られる機能だそうです。
    つまり、1回のコネクションで複数のデータベース・コマンドを同時に照会できるようにするものです。

    MSDNのサンプルコード↓このようになっているみたいです。
    string connectionString =
      "Data Source=MSSQL1;" +
        "Initial Catalog=AdventureWorks;Integrated Security=SSPI;" +
        "MultipleActiveResultSets=True";
    
    初期値ではfalseになっているので、MultipleActiveResultSetsをtrueにする必要があります。

    DBの接続系はよくわかっておらず、誰かが作った接続メソッドを流用しているので
    いつかは書けるようになりたいなと思いました。

    ADO.NET 2.0の注目機能【SQL Server 2005との連携編】

    つまり2005以前は、クエリ文別に、毎回接続しなおしていたんですね。
    大変そうです。


    ■CRUDとは?

    CRUD(クラッド)とは、
    Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)
    データベースのアクセスで
    ユーザーインターフェースに備えるべき4つの基本機能(情報の参照/検索/更新)を指す用語でしあ。
    Create,Regist,Update,Dropとも言います


    ■Management Studio を使った SQL Server の操作で カラムにNULLを挿入する小技
    マネジメントスタジオでカラムを選択して
    Ctrl+0
    を押します。
    わからなくてググったのでここに貼り付けておきます。

    2016年1月21日木曜日

    フロントエンド・タスクランナー(1: 入門編)

    フロントエンドエンジニア ふみえです。 今回はフロントエンド・タスクランナーについて書いていきたいと思います。

    そもそもタスクランナーって何?

    フロントエンド開発において必要になってくる処理といえば、下記のようなものが挙げられると思います。 コードの圧縮 Sass などのコンパイル ファイル変更して、見た目をブラウザがをリフレッシュして確認 フロントエンド開発におけるタスクランナーとは、上記のような処理を自動で行ってくれるツールです。 その代表的なものに、Grunt (http://gruntjs.com/) や Gulp (http://gulpjs.com/) があり今回は今業務で使用している Gulp について書いていきます。

    thumbnail

    Gulp を選んだ理由

    調べたところによると下記のようだそうで、Gulp に決定しました!

    • Node.js の StreamAPI を使用しているため処理が速い
    • 設定ファイルが書きやすく、読みやすい
    • Grunt の問題点が解決されている


    Gulp の導入方法

    こちらですが、次回まとめてあげようと思います。 内容浅くてすみません。。。
    次回は内容も夢もモリモリでお届けいたします! 以上、ふみえでしたー!

    参考記事

    http://liginc.co.jp/web/tutorial/117900
    http://qiita.com/Kshi-Kshi/items/634799bb57872ce0a169 https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

    2016年1月18日月曜日

    初めまして、ふみえです!

    この1月より、フロントエンドエンジニアとして入社しました、ふみえと申します!

    経歴

    新潟県新潟市生まれ。東京理科大学卒業後、オープンソース・ソフトウェア開発会社で勤務中に Web 業界で自身のやりたいことを見つけた後、Web 制作会社でコーダとして勤務、その後スタートアップ企業でフロントエンドエンジニアとして働き、現職に至ります。 趣味は音楽鑑賞です♪ 使用している言語は HTML、CSS、Javascript が主です。

    よく参加しているイベント

    UX JAM

    昨年は私にとって「UX とは何か」を考える年でした。「UX MILK」というキュレーション・メディアに出会い、もっと学びたい!と思うきっかけになりました。プロダクトの作り方・思考の過程などを、様々な方の実例も交えたライトニング・トークは、すぐに実務・実生活に活かせる情報の多い有意義なイベントです。今年も通い続けようと思います。

    最近読んでいる本

    最近通勤時間にやっていること

    • 目が疲れていたら、目を閉じる
    • 目が元気だったら、携帯で情報収集

    最近あった飲み会での出来事

    約20年ぶりに、年末の忘年会(2件)でプレゼント交換をしました(^^) 誰に渡るかわからないプレゼントを選ぶのはとても新鮮で楽しかったです! みんなで歌を歌いながらプレゼントをぐるぐる回します。久々のプレゼント交換にテンションがあがりました↑ageage↑

    最近使用しているサービス

    Slack はよく利用しています。

    今年動向が気になるもの

    DesignSprint!! 世の中の流れがまた変わるのかなって思います。
    Snapchat!! ホワイトハウスでも運用を開始したということなので、動向が気になります。


    以上で自己紹介を終わります。今後もブログを書かせていただきますので、ちょくちょく覗いてみてくださいね! そんなこんなで頑張ります☆
    それでは、ふみえでしたー!!

    2016年1月15日金曜日

    自己紹介 山田です。

    こんにちは山田です。

    自己紹介を書いて行こうと思います。
    人となりが伝わればと思います。

    ■職業 : システムエンジニア
    細かくいうと、Webアプリケーションのシステム開発をしています。
    ブラウザ上で、動的に動くサイトになります。

    入社は2014年で、社会人2年目になります。
    開発環境:ASP.NET .NET Framework 2.0
    開発言語:C#
    DB:MS SQL Server

    ■出身

    千葉県でも南部の割と田舎の出身です。(小学生の時の同級生はなんと11人)
    家は、鉄工所メインの兼業農家でした。

    その頃にコンピュータに興味を持ち始めたのを今でも覚えています。
    当時小学2年生、流行もの好きの親がWindwos98を突然買ってきたのが始まりです。
    とあるソフトウェアをインストールするために、フロッピーディスクを何枚も消費したり、
    はやり始めたインターネットのダイアルアップ接続がよく切れたり、すごくかわいがった記憶があります。

    ■学生時代

    学生時代は電気工学を専攻していました。
    コンピュータの原理が知りたいなぁと思っていたのがきっかけでした。
    具体的には電気回路や電磁波を勉強していました。
    フリップフロップ回路(記憶回路)
    電波の原理

    フリップフロップ回路(記憶回路)が出来たことにより、
    機械演算が可能になって文明は成長したのだと熱いロマンを感じています。

    が、不思議と、この図を良く使って勉強したり、計算していたのに
     原理も含めてすべて忘れてしまいました…。

    記憶とは儚いものです。

    さて研究テーマですが、
    電気のことは勉強せず、「遠隔で工学実験をする方法」をというのを扱っておりました。
    なので、テレビ電話を実現させるマイクロソフトのパッケージアプリケーション(Skype For Business)を組み立てる勉強をしたり、VPNを安く実現させたくネットワーク機器(CiscoとかYamaha)とかで遊んでいました。


    ■なぜSEになりたかったか
    プログラミングを覚えたいというのが根っこにあります。

     既存の完成されたパッケージ商品の物足りない部分を作ったり、不具合が起きる原因が知りたかったのがきっかけでした。

    ■社会人一年目は何をやったか
    書籍や雑誌の営業を半年ほどやっていました。
    Webとはまったく関係なかったのですが、Web発信の媒体が増えている昨今とても勉強にありました。
    著者や出版社、本屋さんがどうやって儲かっているのか知れてとても勉強になりました。
    1年目の12月から方向転換をしてプログラミングを勉強し始めて、
    今日で1年たったくらいになります。

    ■最近はまっていること
    都市がどう発展したかを調べるために、日本の街道や鉄道にはまっています。
    ブラタモリ面白いですね。
    あと、カメラは長年大好きで、写真や動画を撮りまくっています。


    ■好きなもの
    甘いもの、適度な湿度

    ■苦手なもの
    花粉、大きい音、酸っぱいもの

    ■おすすめアプリ
    流れとして、、、
    電子書籍に興味がありいろいろ試していたのですが
    最近は電子書籍アプリのキンドルが使いやすいと思いました。

     

    どうしてこれを選んだかというと。

    ・読書スピードを計測していて、読破するまでのタイマーがでるところ
    が 気に入っています。

    個人的には、本を読むときはあとどれくらい時間がかかるか?
    というところを割と意識していたりします。

    紙の本だと、残りの紙の厚さから判断ができるのですが、
    電子だとそういうのがわかりません。
    その解決方法として役にたっているなぁ~と感じています。
    このささいなところが気に入っています!

    はじめまして。Sです



    こんにちは!
    昨年の5月からC#で開発をしているSと申します。
    気づけばもう社会人2年目です。

    経歴

    大学時代は工学部に所属しており微生物の体内で薬の原料をつくる研究をしていましたが、
    あまり刺激的ではない毎日に飽き飽きして仕事ではもっと面白いことがやりたい!と思い今の会社に入社しました。

    社会人1年目は営業職で主にレストランに営業に行っておりました。
    おいしいものが沢山食べられて幸せでした...♡

    プログラミングは昨年のゴールデンウィーク明けにゼロから始めたので
    毎日新しい発見があり面白いです♪

    趣味

    これといった趣味は特にないのですが、おいしいものを食べに行くのが好きです。
    わりと胃が広がるタイプなので、ブッフェにもよく行きます。
    お寿司だと60貫くらいは食べられます!
    あと死ぬほど辛いものが好きです!!


    おすすめのアプリ

    最近毎日使っているアプリはこの「おこづかい帳」です。



    すごくシンプルな作りになっていて、すぐに登録できるので続けられています!
    レシートを読み込んで記録するタイプなども試したことがあるのですが、
    なかなか上手く読み込むことができず、逆にストレスでした。。。


    新年だし、しっかりお金の管理をしていこう!という方はぜひ一度ダウンロードしてみてください。
    https://itunes.apple.com/jp/app/otonanookodzukai-zhang-deng/id933475348?mt=8


    このブログについて。。。

    約7ヶ月前。プログラミングを勉強し始めた頃のことを思い返すと、本当に分からないことだらけでした。
    分からないことがあってもそれをどうやってググれば良いのか、自分が何が分からないのかが分かりませんでした。。。

    なのでこのブログでは主に開発を始めたころ自分が分からなかったこと、詰まったところなどを書いていこうと思っております。

    この春から開発を始める方々に少しでもお役に立てると嬉しいです♪


    2016年1月14日木曜日

    ねこもちです。 前回の続きで、処理を短くする系です。 ※処理そのものは短くなりませんね、良く考えると。パッと見の記述が短くなっているだけです。   ですが、これが本当に大事なことだと思います。 ■「ifのネストが多く、ifとelse節の対比が難しい」 下記のような関数があったとします。
    void foo()
    {
        var 結果A = 処理A();
        if( 結果A == 成功 )
        {
            var 結果B = 処理B();
            if( 結果B != 成功 )
            {
                var 結果C = 処理C();
                if( 結果C == 成功 )
                {
                   処理D();
                }
                else
                {
                    失敗Cのリカバリ処理;
                    return 失敗C;
                }
            }
        }
        else
        {
            return 失敗A;
        }
        処理F();
        return 成功;
    }
    
    ifが3段もネストしていて、途中で抜けたり、抜けなかったり、 else節があったりなかったり、 このメソッドでは、何が起きるのかを知るのは非常に難しいのです。 まず、結果Aのifのネストを解消します。
    void foo()
    {
        var 結果A = 処理A();
        if( 結果A != 成功 )
        {
            return 失敗A;
        }
        var 結果B = 処理B();
        if( 結果B != 成功 )
        {
            var 結果C = 処理C();
            if( 結果C == 成功 )
            {
               処理D();
            }
            else
            {
                失敗Cのリカバリ処理;
                return 失敗C;
            }
         }
        処理F();
        return 成功;
    }
    
    次に、結果Bのifのネストを解消します。 結果Bが成功だったら、処理F()のあと成功返しているので、そのようにします。
    void foo()
    {
        var 結果A = 処理A();
        if( 結果A != 成功 )
        {
            return 失敗A;
        }
        var 結果B = 処理B();
        if( 結果B == 成功 )
        {
            処理F();
            return 成功;
        }
        var 結果C = 処理C();
        if( 結果C == 成功 )
        {
           処理D();
        }
        else
        {
            失敗Cのリカバリ処理;
            return 失敗C;
        }
        処理F();
        return 成功;
    }
    
    同様に結果Cのifもthen節でreturnするようにします。
    void foo()
    {
        var 結果A = 処理A();
        if( 結果A != 成功 )
        {
            return 失敗A;
        }
        var 結果B = 処理B();
        if( 結果B == 成功 )
        {
            処理F();
            return 成功;
        }
        var 結果C = 処理C();
        if( 結果C != 成功 )
        {
            失敗Cのリカバリ処理;
            return 失敗C;
        }
        処理D();
        処理F();
        return 成功;
    }
    
    こうすることで、処理と失敗時の処理が近づき、非常に読みやすくなりました。 こういう書き方のとき、このif群を「ガード節」というようです。

    2016年1月13日水曜日

    はじめまして、エンジニアのKです

    こんにちは。エンジニアのKです。
    既に何個か投稿済みですが、今回は簡単な自己紹介をしたいと思います。

    経歴

    学生時代は工学部に在籍し、無線通信の研究を行っていました。
    ITSと呼ばれる自動車に搭載する無線通信技術や地上デジタル放送波の受信品質の改善などをテーマとして扱っていました。
    今考えると怪しさ満点ですが、地デジの放送波を計測するためにアンテナを持ってビル陰などを徘徊していたような学生時代でした。

    計測した電波の解析やシミュレーションを行うためにプログラミングを本格的に学び始めたのですが、
    次第にアプリケーションを作って世の中の人に使ってもらいたいと思うようになり、webサービス系の会社に就職しました。
    早いもので社会人6年目となりました。

    扱ってきた言語としては、
    • Javascript
    • PHP
    • MySQL
    • Java
    • C、C++
    あたりで、一番好きな言語はjavascriptです。ブラウザに表示されるDOMをゴリゴリ動かすのが楽しいです。
    HTML5によってブラウザでも色々なリッチな表現ができるようになってきており、
    今はまだスマホのネイティブアプリのリッチさには敵いませんが、いつかアプリとブラウザの垣根が無くなって、
    web上でリッチなコンテンツを作れる日を夢見ています。そう遠くは無さそうです。

    趣味

    コレと決めたものに没頭する傾向があり、少し前まではパズドラにどっぷりハマっていました。課金額は秘密です。
    最近はモンスターハンターの新作が発売されたので、そちらにどっぷりハマっています。
    モンハンは4から始めたニワカなのですが、当時もどっぷりハマって気づけばハンターランクがカンストしていました。
    今作も村の平和のために頑張りたいと思います。

    あと、今はシーズオフですが野球観戦も好きです。最近、贔屓球団の球場の近くに引っ越したので、シーズンの開幕が待ち遠しくてたまりません。

    おすすめアプリ

    他のメンバーの流れに乗って、僕からもひとつ「TimeTree」というアプリを紹介します。


    ひとことで言うと家族、恋人、友人達と使う共有カレンダーなのですが、UIが優れていてとても使いやすいです。
    一度聞いた予定を忘れて「○日に××って言ったじゃない!」と良く怒られている方には、とても重宝すると思います。
    僕も凄く助かっています。

    最後に

    今、技術的にはJavaを習得中で、ServletとAndroidアプリの両方を実務で扱っています。
    今後もJava(と、好きなJavascript)中心の投稿になっていくと思いますが、よろしくお願い致します。

    2016年1月12日火曜日

    いのうえです。

    改めまして、自己紹介をさせて頂きます。
    ※私って、こんな人です。


    ■職歴&技術歴

    □2000年4月 新卒入社


     不動産営業を希望し、就職をするも 

     「システムエンジニアという響きが格好いい」

     という理由で、ネット系の関連会社への勤務を希望

     Yahooジオシティーズで、見よう見まねでHPを作ってアピール ⇒ 希望が通り、ネット系の関連会社へ出向
     もちろん、開発の「か」の字も知らない超初心者。
     でも、「自分で作ったものが動く」という体験に心奪われ、楽しくてしょうがない状態に。

     開発言語 : ASP(VBScript) データベース : SQLServer


    □2002年5月 新しい言語の習得へ①


     Javaを覚えるべく、所属会社の好意もあり、1ヶ月間の詰め込み型研修へ参加させてもらう
     なかなかハードな研修で、1週間毎にテストがあり、結果が悪いと、研修を打ち切られてしまう
     さらには、卒業試験があり、こちらも結果が悪いと、卒業できない(=1ヶ月研修延長)という・・・。

     私は、こういった追い込まれた状況が好きなので、楽しみながら研修を満了。

     無事、JavaでのWeb開発のきっかけをつかむことができました。

     以降、数年間は

     開発言語 : Java(Struts) データベース : MySQL or PostgreSql


     での開発中心

    □2004年1月 新しい言語の習得へ②


     初期に習得したASPからASP.NETへの移行タスク
     ASP.NETにはVB.NET、C#.NETといった選択肢はあったが、Javaに似ているという理由もあり、C#.NETを選択

     当時は、Frameworkバージョン1.0

     その後、1.1、2.0とバージョンアップを重ね、2.0中心の開発をする。

    □2004年1月~現在


     遅まきながら、Framework4.5をやっと経験。もちろん、MVC。
     Razarの使い勝手の良さや、LINQの便利さに心奪われるも、今は80%開発卒業。
     マネージャーとして稼働して、早5年となりました。

     今でも、ちょくちょく時間を見つけては、開発にも携わりつつ、でも本命は、組織マネジメントプロジェクト推進



    2016年1月7日木曜日

    処理を短くする

    ねこもちです。

    古いプログラムを修正していると、そのプログラムが非常に「長大」であると気づくことがあります。
    一つの関数(メソッド)が数百・数千行に及んでいることもあります。

    こういうのは、大体
    「どこにあるデータがいつ更新されるのか、追うのが難しい」
    「ifのネストが多く、ifとelse節の対比が難しい」
    「途中でreturnすればいいのに、制御フラグに値をセットした上で最後まで処理を続けるので、処理を追うのが難しい」
    「途中でreturnしているが、どの条件でそこに入るのかを追うのが難しい」
    「同じようなコードが何回も出てくる(が、100%同じと断言できないので、結局すべて追う必要がある)」
    など、その他のいろいろな「難しいポイント」を含んでしまっていることも多いのです。


    ■「どこにあるデータがいつ更新されるのか、追うのが難しい」
    これについては、下記の方法を取ると、難しさが減ります。
    「変数は使う直前で定義する」
    「できるだけローカル変数にする」
    「できるだけImmutableな設計にする」

    たとえば、Webアプリケーション(ASP.NETなど)の例を挙げます。

    public class XxxxPage : Page
    {
    private string _a = "";
    private int _b = 0;

    public void Page_Load(object sender, EventArgs e)
    {
    _a = Request.QueryString["a"];
    if( string.IsNullOrEmpty(_a) ) {
    return;
    }
    _a = _a.Trim();

    if( IsPostBack )
    {
    _b = int.Parse(_a);
    }
    }

    public void OnXxxxEvent(object sender, EventArgs e)
    {
    // _a, _bを使用するコード
    }
    }

    このようになっていると、OnXxxxEvent()が呼ばれるときに、
    ・事前にPage_Load()が呼ばれていること
    ・Page_Load()内で、どのようなルールで_a, _bの値が決まるのかを知っていること
    の2点がわかっていないと、OnXxxxEvent()を書くのが難しくなります。
    また、他のメソッドが_a, _bの値を変更する可能性もあり、
    結局すべてのプログラムを調べないと、挙動がわからないということになります。

    public class XxxxPage : Page
    {
    public void Page_Load(object sender, EventArgs e)
    { // 何もしない。
    }

    public void OnXxxxEvent(object sender, EventArgs e)
    {
    string a = (Request.QueryString["a"] ?? "").Trim();
    int b = !string.IsNullOrEmpty(a) && IsPostBack
    ? int.Parse(a)
    : 0;
    // a, b を使用するコード
    }
    }

    このように、「使用する箇所で」変数を定義し、同時に初期化することで、aがなんなんか、bがなんなのか、
    まぎれることがなく、プログラムが非常に明快です。

    また、この書き換えの際に、元のコードでは
    _a がまず Request.QueryString["a"]を指し、
    つぎにそれをTrim()したものを指すようになっていましたが、
    書き換え後ではaはRequest.QueryString["a"]をTrim()したものを指し、それを変更しないようにしています。
    こうすることで、aという変数がいつでも同じ値になり、プログラムの挙動を理解するのが簡単になります。


    その他についてはまた後日。

    はじめまして、エンジニアです。


    初めてのかた、はじめまして。
    ご存知の方、こんにちは。

    Zメンです。

    今回は私の自己紹介がてら経歴などを書きたいと思います。

    生い立ち~学生時代

    生粋の北陸生まれ、北陸育ちです。
    昨年からHOTなあの雅な県です。
    余談ですが左手親指をサムアップし、ちょっと曲げた形が似ているます。

    今はエンジニアとして働いていますが、実家が建築関係だったこともあり
    高校の時も大学の時も、自分は建築業界にいくんだろうな~とぼんやり思っていました。

    ちなみに大学時代は防災と都市デザインの2種を専攻してました。
    防災のほうは全国ニュースで流れるような火災の原因分析・解説を教授がやっていたり、
    某有名タワーの防災設計を見せてもらったりで意外と面白かったです。

    都市デザインはイメージが難しいですが、都市に関わる制度・ソフト・ハード・デザイン等
    なんでも研究対象となるような感じです。
    どう伝えて良いものか難しいですが、こんなイメージです。

    入社~現在

    そんな建築畑にいた自分がなんでいまエンジニアをやっているかというと、
    スマホに興味があったからです。
    当時はまだAndroid1.6がようやく出たような時代でした。
    今でこそAndroidも洗練らされたデザイン・操作性ですが、1.6はメカメカしい感じで、
    物好きが使ってます、 くらいの感じでした。当然アプリも怪しいものばかり。
    未だに有名どころで残っているのはShimejiあたりでしょうか。

    そんなわけなのか分かりませんが、現在はスマホ部隊とSEO部隊の管理を担当しています。
    ここ一年はGoogleにどっぷり浸かりぎみですが、どんどん新技術を発表してきているので
    刺激が多く楽しい毎日を送っています。

    おすすめアプリ

    そんなわたしが最近注目しているアプリ・おすすめのアプリをいくつか紹介したいとおもいます。

    GoogleNowLauncher
    ランチャー系はいくつも試してみましたが、動作が重かったりバグが多かったり
    メモリ食いまくったりとあまりお勧めしたいものはなかったのですが、ここ半年くらいはもうこれ。
    多分もう変えられないとおもいます。やっぱりGoogleさん神。

    Favrica
    ファッション好きとしてはZOZO系列以外のアプリを探していて、Origamiも結局すぐ使わなくなったのでなにかないかと思っていたところでした。好きなブランドの新着を見るならこれが一番いい。
    もうちょっと情報量とEC部分強化されないかなぁ。

    E・レシピ
    Exiteが運営してるみたいです。料理ポータルアプリは既にたくさんありますが、料理ポータルサイトの雑多なプル・プッシュ情報をカレンダー視点でサジェストしてくれるのがちょっと新しいです。
    写真もいいですし、好き嫌いが多い人には向かないかもです。


    今後もSEOやスマホ・アプリ系の書き込みが主体になると思いますが、温かい目で見守ってください。
    こういうテーマ調べてというのもいただければ可能な範囲で頑張ります。

    2016年1月6日水曜日

    改めまして、おかだです。


    このブログが開設されてから約半年、、

    これから記事を整理してみんなで分担して書いていこうという流れになっていますので、
    そのトップバッターとして自己紹介をしたいと思います。はずかしい。


    おかだと申します。

    千葉県出身、辰年生まれのアラサー女です。2012年入社の社会人4年目になります。
    社会人デビューからずっと今の会社で働いています。

    初年度は自社サービスの営業を1年間担当し、そのあと今の部署に異動してきましたので、エンジニア歴は約3年になります。(自分で書いていて驚きですが、、時は残酷ですね、、)

    昨年まではほとんど自社のWEBサービスの開発をしていましたが、昨年からは自社アプリのサーバーサイドの開発を担当しています。


    好きなこと?

    せっかくアプリ開発チームにいるのでそれを踏まえつつ、私のお気に入りのアプリをいくつか紹介したいと思います♪
    プライベート携帯はずっとandroidなので、androidよりになってしまいますがご容赦ください。

    Scene

    Sceneは写真整理アプリです。
    個人的に、出掛ける時に食べたものなど写真を撮ることも多いですし、画像を加工することもまぁまぁありますし、仕事柄キャプチャをとることも結構多いです。
    Sceneのいいところは、画像一覧と日付表示が一体化しているところです。
    サムネと日付が同列に並んでいることで、写真を見返すのも日記を読み返しているような感覚で楽しむことができます。
    日付をタップするとカレンダー型の表示に切り替わるのですが、それもまたかっこよくて素敵なのです。

    ギャラリーアプリに困っている方はぜひ使ってみてください^^

    google playへGO >>

    特に気に入ったのはこの表示。日記みたいで好きです


    Google Fit

    ご存知の方も多いかもしれませんが、Googleの運動管理アプリです。

    これは偶然ストアで見かけたので入れてみたパターンなのですが、機能がシンプルで、わかりやすいのがいいです。
    ふつう、ダイエットアプリとか、運動管理とか、食事管理とか、健康系のアプリは、かなりモチベーションの高い人には機能が充実しているものが便利だと思いますが
    このGoogle Fitは「特にそこまで運動とかがんばってやるつもりないよ~」という人がとっつきやすいです。

    1日の運動(走る、歩く、自転車)の目標値を設定すると、アプリを起動したときに
    「いまここまでやったよ!」とゆる~くおしえてくれるだけなのですが
    ちゃんと目標を達成するとほめてくれるのも、なんだかいいところ。

    人とアプリの気持ちいい関係ってこういう感じなのかな、と思います。

    日々自分がどのくらい歩いたり走ったりしているのか、気にはならないけど知りたいな~という方はぜひ使ってみてください^^

    google playへGO >>

    自分がどれだけ運動していないかを実感できます

    スマホゲームも好き

    仕事の一環で書いているブログなので、ゲームのことを書くのは少し悩みましたが、ゲームを作っている方々も仕事でやられていると思うので、すこしだけ、、
    (紹介したいゲームアプリが多くて書ききれないので、それはまたいつかの機会に、、)

    最近はテレビのCMもゲームばっかりで、世の中の人がたくさんゲームしているということなのでしょうが、みなさんはいくつくらいゲームやってますか?
    可処分時間も限られますし、そんなに何個も同時に遊べないですよね。。。

    そんな私は、ひょんなことから出会ったゲームアプリを、遊ばなくなったからと言ってアンインストールせず、端末にストックしています。
    たまにそのストックを見返して、「やっぱりいいゲームだ~」なんて思いながらちょっとだけ遊びます。

    だからなんだよって話になってきてしまいましたが、アプリと人の付き合い方っていろいろあって、
    アプリの企画は大変、という結論です。



    これからもスマホやアプリについての記事を書いていこうと構想していますので、もしよろしければお付き合いください。

    おかだでした!