はじめに はじめまして、medibaのauスマートパス開発部　松本です。 私たちのグループでは、その名前の通り、auスマートパス向けのサービスを中心に開発を行っており、一部自社サービスの開発なども行っています。 これらのサービス群で使われている技術などについては、おいおい紹介していければと思っています。 現在ではWebとアプリを連動させた企画や訴求が非常に多く、新しいサービスの企画時にも、Webとアプリを最初から用意することが当たり前のようになっています。 弊社では現在、アプリ開発を行っていますが、実は昔、こんな名前でアプリをリリースしたりもしていました。 様々な事情により、１年ほどで中止されてしまった幻のプロジェクトです。 Eclipse3.5からAndroidStudioへ移行 社内でのアプリ開発の需要の高まりもあり、数年ぶりに昔のソースを引っ張りだして、最新の環境で動くようにしてみました。 EclipseのADTにて作成したプロジェクトを、AndroidStudioへ移植を行います。 AndroidStudioのメニューよりファイル→New→ImportProjectを選択、オプションとしてGradle-styleを選択しました。 これだけで、~/AndroidStudioProjects 配下のフォルダに、AndroidStudio用のプロジェクトが出来上がり、Gradle 関連のファイルも自動生成してくれます。 app/build.gradleを編集し、sdkのバージョンを当時のものへ近づけました。 defaultConfig { applicationId "jp.mediba.********" minSdkVersion 4 targetSdkVersion 4 } かなり古いですね。ライブラリなどはインポートされませんでしたので、以下のようにlibsフォルダを作成、配置しました。 左ペインのツリー表示部分を「プロジェクト」に合わせ（こうしないと新規→ディレクトリがでてきません）、app配下にlibsフォルダを作成すれば、後は直接ドラッグ＆ドロップでjarファイルを配置できます。 配置後、プロジェクトペイン上のjarファイルを右クリックし「Add as Library」を選択することで、AndroidStudio側で自動でbuild.gradleファイルに dependencies { compile files('libs/******.jar') compile files('libs/******.jar') } のように記述してくれます。 これで、ビルドが通るようになりました。 AVD Managerから、テスト用デバイスを作成、ターゲットOSを設定し、そのままでは解像度の問題があるためscaleを2dp on device = 1pc onscreenに変更します。 そして起動。無事エミュレータ上でアプリが起動しました。 ５年も前のプロジェクトの移行がこんなに簡単に終わるとは思いませんでした。 Logクラスの活用 いちいちデバッガを起動するまでもない、簡単な動作チェックなどを実施するときは、もっぱらLogクラスで済ませてしまいます。 import android.util.Log; Log.d(“ラベル名:”, it.getStringExtra(“変数名”)); デバッグ用として後から書くのではなく、コーディングの流れの中で書いてしまうと手間が省けます。 記述も簡単ですし、AndroidStudioのlogcatで/dや/vのようにフィルタしておけば、以下のようにまとめて視認するのも楽です。 分岐確認用の文字列まで仕込むようになると、本末転倒になってしまいますが、非常にお手軽なのでおすすめです。

はじめに mediba制作部 メディアクリエイティブグループの今野です。 初回投稿なので、カンタンにグループ紹介からさせていただきます。 当グループは20名強のメンバーがいて、サービスごとにチーム編成されており、デザインとフロントエンドを担当しております。 普段の業務で培ったノウハウや、また、業務以外で、UI/UX、Webの最新技術も研究などもしているので、今後そのネタも記事にしていく予定です。お楽しみに！ 次から本題です。 backdrop-filterとは 先日iOS9.0がリリースされました。 iOS9.0では、様々な機能がブラウザに実装されたのですが、追加機能のうちの backdrop-filter プロパティをさっそく試してみました。 backdrop-filter は、背景に filter が使えるようにするプロパティです。 filter は、色相・明度・彩度や、ぼかし、セピアなどPhotoshopでよく使う機能があります。 例えば、以下画像のように、ぼかしである blur() をうまく使えば、すりガラスのような見た目もカンタンに実装できます。 （今までは、通常とぼかした画像を二重にして擬似的に表現しなければならなかったため、ちょっと面倒でした） 実装方法 実装方法はカンタンで、上に被せてるボックスに backdrop-filter を追加するだけ。 以下は、例です。 background-color: rgba(31, 20, 11, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); 現在、 -webkit- のベンダープレフィックスが無いと動作しません。 なお、上記の書き方だと、対応していないブラウザには、画像左側の見え方になりますので、非対応ブラウザでも問題なく見えます。 さらに、iOS9.0から @supports も対応しており、指定プロパティが対応しているかどうかも条件分岐できるようになったため、非対応ブラウザの表現幅が広がりました。 ちなみに、似たような名前で、 ::backdrop 擬似要素というのがありますが、こちらは、 dialog 要素で生成したモダールウィンドウ以外の背景に装飾するための機能です。 今まで、モーダルウィンドウを一から作成するのは、少々面倒でしたが、今後はHTML、CSS、（JavaScript）でカンタンに実装できるので、こちらの機能も今後要チェックです。 各ブラウザ側の対応はこれからですので、早々に使えるわけではありませんが、最新ブラウザだけちょっと違う見え方というのも面白いと思いますので、ぜひ試してみてください。

medibaでCTOをやっております山田です。 はじめに システム開発がほぼ内製になり、新しい技術も積極的に導入し、また手掛けているサービスの規模も大きく、ナレッジも溜まってきましたので、ブログを通じて外部に公開していこうということになりました。 最初の投稿ですので、少しだけmedibaについても記載させて頂きます。 どんなサービスをやっているか？ auスマートパスの各サービス、auヘッドラインやコネタなどのニュースメディア、auWallet、またauドメイン上のweb広告、キャリアメール広告などを展開しています。 auサービス以外にも独自メディア企画も開発中で、au系サービス、非au系サービス、広告事業と幅広く事業を手掛けております。 利用している技術は？ PHP/yii frameworkをメイン言語に据えており、最近ではruby on rails、Scalaでの開発も行なっております。medibaが手掛けている事業、サービスは数多くあるため、一つの技術に絞るのではなく事業やサービスによって最適な技術選択をするようにしております。 最近注力している領域はAWSで、AWSサービスを活用して実装量を少なく手がかからないシステム作りを行っております。 medibaで利用されている技術はこちらも参照して下さい。エンジニアを絶賛募集中です！ http://www.mediba.jp/recruit/career/engineer/ どんなことを書いていくか？ キャリアサービスの裏側にはどういった技術が使われているか、バックエンドだけでなくデザインを含めたフロントエンドの技術情報を可能な限り公開していきたいと思います。 また、ちょっとした技術Tipsや技術調査結果なども合わせて公開していきます。 それでは今後ともよろしくお願いします。