【CSS】とにかく読みにくいページをつくってみた！pointer-events でイベントを制御する
こんにちは、R&D 部の青野です。 「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。 ということで、読みにくいページを作りました。 と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。 仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。 また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。 （さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。） ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の
3/12(土) 「第3回フェンリルデベロッパーズセミナー in 島根」開催決定！ゲストスピーカーは伊藤直也さん
こんにちは、田林です。 昨年 2 回開催したフェンリルデベロッパーズセミナーの第 3 回を開催します。 島根県松江市では、Ruby 関連の勉強会が豊富な反面、ネイティブアプリやウェアラブルといった技術に触れる場はまだまだ限られています。 島根を IT でもっと盛り上げたいフェンリルでは、日々現場で活躍するフェンリルのエンジニアや、業界をリードするゲストスピーカーが登壇。Ruby だけでなく、ホットな技術テーマを数多く取り上げ、幅広いデベロッパーに楽しんでもらえる内容を予定しています。 毎回何割か学生の方も参加されるので、学生でも楽しめる内容も盛り込みたいと考えています。詳細は決まり次第発表いたします。 過去の様子は下記を参照。 【満員御礼】フェンリル デベロッパーズ セミナー in 島根を開催しました。 第2回 フェンリル デベロッパーズ セミナー in 島根を開催しました。 今回のゲスト
C言語に置き換わるか？現在はFacebookで開発されているD言語について
こんにちは。開発担当の渡部です。 普段の業務では Web のフロントエンド・サーバーサイドをやりつつ、オフの時は Oculus Rift を触っており Developers Summit 2014 などのイベント等にも多数参加していますが、 本日はジワジワと伸びているプログラミング言語についてのお話です。 つい先月、このブログでも取り上げた Objective-C 後継として開発中の Apple Swift や、 JavaScript を置き換えるものとして作られている Google の Dart や Microsoft の TypeScript などのように、既存の言語に限界を感じて新しい言語を作るというケースは非常に多いです。 今回はその中から、ハードウェアレベルからアプリケーションまで扱えるシステムプログラミング言語として不動の地位を築いているC言語の後継という大きな目標を掲げて開発
Swift でもう一度 iOS/OS X アプリ開発に挑戦してみませんか？
こんにちは。開発担当の木村です。 今年も毎年恒例の一大イベント WWDC が開催されました。 iOS 8 や OS X 10.10 とあわせて4000を超える API が発表され、 開発者のためのイベントとして、例年以上にふさわしい内容だったのではないでしょうか。 中でも私がビビッと来たトピックスは新言語「Swift」の発表です。 これまで Objective-C で開発してきた iOS / OS X アプリがどう変わっていくのか、楽しみで仕方ありません。 iOS / OS X アプリを開発しようと思ったけど、Objective-C がわかりづらくて諦めた。。。 そんな方々も Swift でもう一度 iOS/OS X アプリの開発に挑戦してみませんか。 変数 NSInteger,NSString…と Objective-C のクラスライブラリは独特の型を持っています。 いつも使っている型
今最も注目されている設計手法！MVVM を Android アプリ開発に取り入れてみた
こんにちは。共同開発部開発担当の北川です。 クロスプラットフォームなアプリ開発では Xamarin の使用はビジネスロジックの共通化が可能となり非常に効果的です。 すべてのアプリを単一の言語（C#）で実装することができる点だけでも魅力的ですが、MVVM 設計によりその再利用性を高めている点こそがその真価を発揮しているとも言えます。 私は Xamarin でのアプリ開発を通して MVVM 設計のすばらしさを経験してしまいました。もう後には戻れません。 Java や Objective-C でのアプリ開発でも MVVM 設計は開発スピードと品質確保を両立するために有効であるはずです。 今回は Android アプリ開発（Java）で MVVM を使うとどうなるか、紹介してみたいと思います。 MVVM 設計について MVVM 設計ではビジネスロジックを Model が担当し、ViewModel
Xamarin を使って iOS, Android, Windows ストアアプリを効率的に開発する！
こんにちは。共同開発部 開発担当の伊藤です。 いわゆる「アプリストア」のあるプラットフォームも iOS、Android、Mac、Windows と、かなり数が増えてきました。 このような状況ですので、フェンリルにも「iOS と Android で同じアプリを開発したい」というご相談をよくいただきます。 しかし、iOS と Android のアプリを、それぞれで同じように作ると、コストも時間もそれに見合う程度にかかります。 「iOS も Android も、同じプログラムで動けば、もっと効率よくアプリを作っていけるのに」という要望に応えるため、様々なクロスプラットフォーム開発の技術が出てきました。 今回は、その中でも昨年末ごろから名前があがってきている Xamarin についてご紹介します。 Xamarinとは 簡単に言うと C# で iOS、Android、Mac のアプリを開発できるツー
ちょっと待った! Visual Studio 2010 をオトクに入手するワザを公開します!
こんにちは！ フェンリル社内で Microsoft のライセンスに一番詳しい（かもしれない） RAPT こと山口です。 普段は主に Sleipnir の開発をしていますが、Microsoft 製品を購入する際には、社内から「オトクに入手する方法はないですか？」などと声がかかります。 さて、今回は Visual Studio 2010 を入手検討中の個人開発者や中小規模の開発者グループ、これから学習しようとしている方々へ朗報です！ 完全に新規購入であっても素直に新規購入するのではなく、ひと手間かけることでオトクに入手できる方法がありますので紹介したいと思います。 なお、ここで紹介する方法は、コンプライアンスに準拠しているのでご安心を！ ■ 機能と価格 Visual Studio 2010 の機能、および各エディションの比較 http://www.microsoft.com/japan/vi
RubyでiOSアプリ開発ができるRubyMotion
東京で開発を担当している森本です。 みなさん楽しく iOS アプリつくっていますか？！最近の私はというと RubyMotion を使って iOS アプリをコツコツ作ることがささやかな楽しみになっています。 RubyMotion とは、元々 MacRuby を作っていた Apple のエンジニア Laurent Sansonetti さんが HipByte という会社をたちあげて作ったプロダクトです。 これを使うと、なんと Ruby で iOS や Mac のアプリを作ることができてしまいます。 Objective-C よりも Ruby が好きで、 iOS のアプリを Ruby で書けないのかなあなどと日々思っている方に、ぜひお勧めしたいプロダクトです。 今日は、この RubyMotion をご紹介したいと思います。 RubyMotion とは 名前から薄々感じさせているとおり RubyMo
Jenkins がもっともっともっと便利になるプラグイン 8 つ
こんにちは、開発担当の松本です。 前々回、 前回に引き続いて、 今回も Jenkins の便利プラグインをいくつか紹介します。 リストビューの表示内容を拡張する: Extra Columns 名前や上の画像が示すように、リストビューに表示するカラム項目を拡張してくれるプラグインです。 プラグインインストール後に、ビューの変更のカラムに上記画像のような項目が追加されています。項目によっては設定も付いていたりします。 プロジェクト説明や設定へのリンクなど小粋で便利なカラムが多いので入れておくと便利です。 リストビューをグループ化できる: Categorized Jobs View 正規表現を用いたグループによって、リストビューの項目をまとめることができるプラグインです。 カテゴリビューを作成するには、プラグインをインストールした後に、新規ビュー作成ページで「Categorized Jobs V
Apple が公開しているオープンソースソフトウェアいろいろ
こんにちは。Mac / iOS アプリ開発担当の金内（Emacs 派）です。 UNIX ベースである Mac OS X は、たくさんのオープンソースソフトウェアから成り立っています。基盤である Darwin はカーネルを含む OS そのものがオープンソースですし、 OS X の兄弟にあたる iOS や Xcode を中心とした開発環境もまた、オープンソースソフトウェアを多く含んでいます。 いろいろと秘密主義で有名な Apple ですが、ソースコードを公開・共有することでオープンソースの世界に多くの貢献をしているのも事実です。 WebKit Apple とオープンソースといったときに最もピンとくるのは WebKit プロジェクトではないでしょうか。 フェンリルのウェブブラウザ Sleipnir とも切っても切れない関係にある、ウェブコンテンツのレンダリングエンジンです。 KDE プロジェクト
PSD からテキスト情報を抽出するスクリプト
こんにちは。デザイナーの高口です。 デザイナーの皆さんは、デザインを開発者に伝える時、どのようにしていますか？ 口頭で伝える、印刷したデザインに書き込む、指示書を作る…様々な手法があると思いますが、どれも時間がかかりますよね。 そこで今回は、伝える手間を少しでも減らすべく、PSD からテキスト情報を抽出するスクリプトをご紹介いたします。 1.スクリプトをダウンロード まず、下記のリンクからスクリプトをダウンロードして下さい。 (ご利用に際しては、自己責任にてお願いいたします。) ダウンロード ： TextExportToCSV ダウンロードしたファイルを解凍すると「TextExportToCSV.jsx」というファイルがありますので、下記のフォルダにコピーして Photoshop を再起動して下さい。 Windows – C:\Program Files\Adobe\Adobe Photo
【iOS/Mac開発】Core Data を使いはじめるのに最低限知っておけばいいこと
こんにちは。Objective-C は Emacs で書く金内です。 ウェブブラウザ Sleipnir for Mac や Sleipnir Mobile for iPhone / iPad は、ブックマークや履歴・タブのデータを Core Data を使って管理しています。 Core Data は iOS / OS X 開発の主要フレームワークのひとつですが、どうにもとっつきにくいためか、尻込みしてしまう方も多いという印象があります。 この記事の目的は、とっつきにくい Core Data を最低限の内容にしぼって解説して、「なるほどそーいうものなのね。ボク／ワタシのアプリでも使ってみよっかなー」と思っていただくことです。 どんな時に使うの？ ひとことで言えば、Core Data は Apple 純正の高機能・高性能データ管理フレームワークです。 iOS / Mac 向けのアプリである程度
成果の上がるUI/UXをデザインする為にはリサーチが大切であるという話
こんにちは、坪内です。 先日、新たにスマートフォンアプリ向けにUI/UXリサーチ･デザイン事業を始めますよ、というプレスリリースを配信させていただきました。日経産業新聞さんや Cnet さんにも記事を載せていただきました。 企業のスマートフォンアプリ開発におけるUI/UX面の課題や問題点を抽出し、改善していくという言わばスマートフォンアプリのデザイン・コンサルティングのような事業です。この事業では、ユーザビリティテストやグループインタビュー、ビジネスコンテキスト調査、その他ありとあらゆるリサーチ手法を駆使しながら、徹底したユーザー視点で、ユーザーの満足をデザインするサポートを行います。 UI/UXリサーチ・デザイン事業は、 Sleipnir Mobile の開発運用やスマートフォンアプリの共同開発事業の経験で得たノウハウを余すことなく取り入れた、専門的なリサーチ・デザインサービスです。その
開発者募集！フェンリル島根支社を開設します
こんにちは、田林です。 この度 2013 年 4 月にフェンリルは島根支社を開設し、HTML5、JavaScript、Ruby、LAMP 等でのウェブアプリケーション開発を島根支社（松江市）にて始めます。 そこで、島根で働きたいウェブアプリケーションの開発者を募集します！ 現在島根に在住の方、もしくは UI ターンで島根で働きたい方はこちらからご応募下さい。 また、会社説明会を行いますので、ご興味のある方は是非ご来場ください。 日時：2013 年 2 月 16 日（土）10:00〜11:00 場所：松江オープンソースラボ ご来場希望の方は、[氏名・ご連絡先携帯電話番号]を添えて下記アドレスまでメールお願いいたします。 recruit@fenrir.co.jp ウェブアプリケーションの共同(受託)開発始めました スマートフォンアプリの開発は既に 100 本以上のアプリ開発実績があり、これまで
Kindle Paperwhite で iOS のドキュメントを快適に読む
こんにちは。 Sleipnir 3 for Mac, Sleipnir Mobile for iPhone / iPad 開発担当の宮本です。 少し前ですが、今年の11月19日に Kindle Paperwhite が発売されたので買いました。 技術書があまり対応していないので本はほとんど買ってないのですが、iOS のドキュメントを読むのに Kindle をフル活用しています。 Kindle では MOBI 形式のファイル閲覧をサポートしており、HTML などの構造化された文章であれば、まあまあ変換できます。 iOS や Mac のドキュメントは Docset という形式で提供されており、中身はただの HTML なので、MOBI に変換できそうですね。 さっそくスクリプトを書いてやろう思ったのですが、少し検索したらすでに良いスクリプトがあったので、今回はその紹介をします。 docset2k
Jenkins がもっと便利になるおすすめプラグイン 8 つ
こんにちは、開発担当の松本です。 今回は、Jenkins にたくさんあるプラグインの中からおすすめのプラグインをいくつか紹介します。 ジョブ一覧にアイコンを追加できる: Custom Job Icon 今年8月にリリースされた比較的新しいプラグイン。名前の通りプロジェクトごとにアイコンを登録できて、それがプロジェクト一覧に表示されるようにできます。 利用するには、プラグインインストール後にアイコンを登録する必要があります。 「Jenkins の管理」→「システムの設定」ページに「Custom icons」セクションが追加されていますので、そこでファイルを追加しておきます。追加しても「Refresh icon list」をクリックしないと表示が更新されない点に注意。 なお、画像の拡大縮小あまりきれいに行われないので、アイコンのサイズは 24 x 24 にしておくのがよいみたいです。 アイコン
スマホ関連データがいっぱい”OUR MOBILE PLANET”
こんにちは、プロモーション担当のクーパーです。みなさんは、ガラケー派？スマホ派？ぐんぐん浸透してきている感のあるスマートフォンですが、みなさんの周りではいかがでしょうか。 そんなスマホ動向をデータでチェックしたい時には、“OUR MOBILE PLANET” by Google がおすすめです。 OUR MOBILE PLANETとは？ Google が提供する OUR MOBILE PLANET では、各国別のスマホに関するデータが公開されています。 太っ腹！基本は英語ですが、日本市場に関するデータについては日本語も用意されています。 中には、チェックボックスで自分の欲しいデータをチェックしていくと自動でチャートを生成してくれるツールもあります。プレゼンやブログ作成に重宝しそうです。 例えば、2012年版：30歳～49歳で、スマホを使ってショッピングをしたことのある人の男女別割合を日／英
WebKit を搭載した Sleipnir 3 for Windows の開発をはじめました！α版を公開！
こんにちは、デザイン担当の福島です。 現在、Sleipnir 3 for Windows では、レンダリングエンジンに WebKit を搭載した Sleipnir 3 を開発しています！ 世界的にシェアを広げている WebKit を採用していくことで、ユーザーのみなさまへ更にリッチでパワフルな Sleipnir を提供できるように開発を進めていきます！ WebKit は現在、ブラウザシェア1位を誇る業界標準の Trident と並び、多くのブラウザで使用されているレンダリングエンジンです。 今回配布する WebKit を搭載した α 版 Sleipnir 3 for Windows では、Trident と WebKit を切り替えて使用できます。 α 版を公開！ 一足先にα版を公開します。α版は不安定なため下記をよく読んでからお試しください。 α版 について α版 は、一部の機能と可能性
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
