プログラミング学習のためのサイト、ツール

こんにちは!

今回はサーバーサイド担当の井上がお送りします。

 

私たちWONDERFULL開発チームは若いメンバーが多く、立場などにこだわらず、いろんな意見ウェルカムで風通しの良いフレキシブルな開発チームです。

 

現状のサーバーサイドはnode.jsとPHPで開発していますが、新システムをpythonでやってみたいと言うメンバーの声もあり、担当メンバーは新たにpythonにチャレンジする事になりました。ちゃんとした理由と熱意があれば新しいことにもチャレンジさせてもらえるとてもいい環境だと思います。

 

とは言え社内は若手中心の環境ですので基本的に教えてもらうのを待つではなく、自分で調べ、学んでいく必要があります。

 

そこで今回は僕達がプログラミングを学ぶのに役立てているサイトをいくつか紹介したいと思います。

 

概要、基本を学ぶ

3分動画でのプログラミング学習サイト。新しいプログラミング言語を学ぶとき、とりあえずここを見れば概要を把握できます。

ブラウザ上でコードを書いて手軽に実行できるオンラインエディター。環境構築しないでも手軽にプログラムを書くことができます。デュアルディスプレイでドットインストールを見ながら実際に手を動かしてみるのに捗ります。

 

Tips、ノウハウ、問題解決方法の調査

プログラミングに関するTips、ノウハウなどの技術情報共有サービス。ためになる情報から問題が起こった時の解決手段まで。情報が日本語なのが助かります。。。

Q&A形式のプログラミング情報サイト。WONDERFULLのサーバーサイドで使っているフレームワークSailsは日本ではマイナーなこともあり、公式ドキュメント以外ではこうした海外のサービスで知りたい情報が見つかることがほとんどです。

 

その他個人ブログにも参考になることや学ぶこともありますが、やはり情報がある程度集約している方が探しやすいですし、こういったサイトの存在はとてもありがたいです。

 

 

エンジニアさんだって怖くない! Sketch3を使ってみよう①

 あけましておめでとうございます。デザイナーの吉田ことヨッシーです。

今回は「エンジニアさんだって怖くない! Sketch3を使ってみよう①」ということで、

Sketch3(Photoshopみたいなデザインソフト)の良いところや簡単な使い方を紹介します。

 

f:id:tech-inagora:20160104134046p:plain

 

 

「は?エンジニアなんだし、使えなくてもいいし...」って思っているそこのあなた。

 

使えるようになってしまえば、デザイナーがいなくても素敵なアプリが作れてしまいますよ!

 

「でも、お高いんでしょう?」

 

いえいえ そんなことはありません。Sketch3はとてもリーズナブルなんです。

 

Sketch 3は99ドル(1ドル120円とすると1万1800円)の買い切りソフト。

 

さらに1カ月間のフリートライアルがあるので、使い勝手を試してから購入できるんです♪

 

「でもでも、簡単とかいって、それはデザイナーだからでしょう?」

 

いえいえ、操作は直感的ですごく使いやすいんですよ。

一緒に使い方を見てみましょう。

 

①アプリを立ち上げてみよう

 

f:id:tech-inagora:20160104132159p:plain

 立ち上げるといきなりこの画面がババーンと出てくるので

okを押して先へ。

 

②えっ 真っ白

 

f:id:tech-inagora:20160104132419p:plain

はじめヨッシーもびびりましたが

心配はいりません。簡単。

左上の「Insert」を押しましょう。

f:id:tech-inagora:20160104132731p:plain

 

メニューがだだっとでできますので、

「Artboard」を選択 この「Artboard」の上にデザインしていきますよ。

 

f:id:tech-inagora:20160104132824p:plain

 

「Artboard」を選択すると、画面右のメニューに

サイズがでてきます。たくさんの端末に対応したサイズがはじめから

セットしてあるので、必要なものを選択しましょう。

f:id:tech-inagora:20160104133025p:plain

 

 じゃーーーーん

f:id:tech-inagora:20160104133136p:plain

できました。

 

f:id:tech-inagora:20160104133300p:plain

 

何個でも(たぶん)置けます。

 

これで準備OK!ガンガンデザインしていきましょう。

 

次回はとても魅力的な

「テンプレート」の使い方を紹介したいと思います。

 

f:id:tech-inagora:20160104133616p:plain

こんなパーツがはじめからSketch3に用意されています。

これを使用してデザインしてきましょう。

 

ではまた次回!

 

 

 

 

 

 

サーバーサイド紹介

はじめまして。

サーバーサイド全般担当してます山本です。

 

今回は、WonderfullアプリのWebフロント部分で利用してる技術の紹介をしていきます。

 

サーバーサイド

 WonderfullではNode.jsを利用してwebサーバーの構築を行っています。node.jsはシングルプロセスで動くので、メモリ消費が少なく済むといった利点があります。

 また、クライアントサイドの開発もjavascriptを使うので、共通の処理をまとめられるのもnode.jsの特徴かと思います。

 フレームワークとしては、RailsライクなフレームワークであるSailsを使ってます。SailsはRuby on Railsを模倣するようなMVCパターンで設計されており、学習コストがそれほど高くなく、非常に使いやすいフレームワークです。node.jsでMVCパターンのアプリケーションを作るなら非常に簡単につくれます。また、URLルーティングがしっかりしてるので、URIの定義が捗ります。

 DatabaseにはMongoDBを利用しています。Wonderfullでは、大量の商品データを扱うので、大量のデータを得意とするMongoDBを選択しています。

 

クライアントサイド

 web担当なので、もちろんクライアントサイドも開発してます。WonderfullのクライアントサイドではAngularJSを用いて各種ページの実装を行っています。

 

 サーバーサイドでのWonderfullの基礎となる技術は上記の技術です。 上記の技術に少しでも興味がある方、ご気軽にご応募ください。

 

[iOS]AutoLayoutでWarningを出さない3つの事

 

皆様はじめまして。
InagoraのiOSエンジニアの仁科です。社会人2年目で、Objective-Cを学んで1年になります。
 
「WONDERFULL」の画面では大体Storyboardを使って画面を作成しています。
AutoLayoutは奥が深くて、まだまだ慣れないところは多々ありますが、綺麗にレイアウトを作る上での意識を紹介していきたいと思います。

Nginx vs Apache

What is the Nginx web and proxy server and how does it compare to Apache? Should you use one of these servers or both? Here we explore some answers to these questions.

The Apache web servers have been in use since 1995. Apache powers more websites than any other product; Microsoft IIS comes in second.

Because the open-source Apache web server has been available for so many years, and has so many users, lots of modules have been written to expand its functionality - most of these are open-source as well. One popular configuration, for instance, is to use Apache to server up static web pages and the mod_jk module to run Java and JSP code on Tomcat to make an interactive application. Another example is using mod_php to execute php scripts without having to use cgi.

But Apache slows down under heavy load, because of the need to spawn new processes, thus consuming more computer memory. It also creates new threads that must compete with others for access to memory and CPU. Apache will also refuse new connections when traffic reaches the limit of processes configured by the administrator.

Nginx is an open source web server written to address some of the performance and scalability issues associated with Apache. The product is open source and free, but Nginx offers support if you buy its Nginx Plus version.

Nginx says its web server was written to address the C10K problem, which is a reference to a paper written by Daniel Kegel about how to get one web server to handle 10,000 connections, given the limitations of the operating systems. In his paper, he cited another paper by Dean Gaudet who wrote, “Why don't you guys use a select/event based model like Zeus? It's clearly the fastest”.

Nginx is indeed event-based. They call their architecture “event-driven and asynchronous”. Apache relies on processes and threads. So, what’s the difference?

How Apache works and why it has limitations

Apache creates processes and threads to handle additional connections. The administrator can configure the server to control the maximum number of allowable processes. This configuration varies depending on the available memory on the machine. Too many processes exhaust memory and can cause the machine to swap memory to disk, severely degrading performance. Plus, when the limit of processes is reached, Apache refuses additional connections.

Apache can be configured to run in pre-forked or worker multi-process mode (MPM). Either way it creates new processes as additional users connect. The difference between the two is that pre-forked mode creates one thread per process, each of which handles one user request. Worker mode creates new processes too, but each has more than one thread, each of which handles one request per user. So one worker mode process handles more than one connection and one pre-fork mode process handles one connection only.

Worker mode uses less memory than forked-mode, because processes consume more memory than threads, which are nothing more than code running inside a process.

Moreover, worker mode is not thread safe. That means if you use non thread-safe modules like mod_php, to serve up php pages, you need to use pre-forked mode, thus consuming more memory. So, when choosing modules and configuration you have to confront the thread-versus-process optimization problem and constraint issues.

The limiting factor in tuning Apache is memory and the potential to dead-locked threads that are contending for the same CPU and memory. If a thread is stopped, the user waits for the web page to appear, until the process makes it free, so it can send back the page. If a thread is deadlocked, it does not know how to restart, thus remaining stuck.

Nginx

Nginx works differently than Apache, mainly with regard to how it handles threads.

Nginx does not create new processes for each web request, instead the administrator configures how many worker processes to create for the main Nginx process. (One rule of thumb is to have one worker process for each CPU.) Each of these processes is single-threaded. Each worker can handle thousands of concurrent connections. It does this asynchronously with one thread, rather than using multi-threaded programming.

The Nginx also spins off cache loader and cache manager processes to read data from disk and load it into the cache and expire it from the cache when directed.

Nginx is composed of modules that are included at compile time. That means the user downloads the source code and selects which modules to compile. There are modules for connection to back end application servers, load balancing, proxy server, and others. There is no module for PHP, as Nginx can compile PHP code itself.

Here is a diagram of the Nginx architecture taken from Andrew Alexeev´s deepanalysis of Nginx and how it works.

In this diagram we see that Nginx, in this instance, is using the FasCGI process to execute Python, Ruby, or other code and the Memcache memory object caching system. The worker processes load the main ht_core Ngix process to for HTTP requests. We also see that Nginx is tightly integrated with Windows and Linux kernel features to gain a boost in performance; these kernel features have improved over time, allowing Nginx to take advantage.

Nginx is said to be event-driven, asynchronous, and non-blocking. “Event” means a user connection. “Asynchronous” means that it handles user interaction for more than one user connection at a time. “Non-blocking” means it does not stop disk I/O because the CPU is busy; in that case, it works on other events until the I/O is freed up.

Nginx compared with Apache 2.4 MPM

Apache 2.4 includes the MPM event module. It handles some connection types in an asynchronous manner, as does Nginx, but not in exactly the same manner. The goal is to reduce memory requirements as load increases.

As with earlier versions, Apache 2.4 includes the worker and pre-forked modes we mentioned above but has added the mpm_event_module (Apache MPM event module) to solve the problem of threads that are kept alive waiting for that user connection to make additional requests. MPM dedicates a thread to handle sockets that are both in listening and keep-alive state. This addresses some of the memory issues associated with older versions of Apache, by reducing the number of threads and processes created. To use this, the administrator would need to download the Apache source code and include the mpm_event_module, and compile Apache instead of using a binary distribution.

The Apache MPM event model is not exactly the same as Nginx, because it still spins off new processes as new requests come in (subject to the limit set by the administrator). Nginx does not set up more processes per user connection. The improvement that comes with Apache 2.4 is that those processes that are spin offs create fewer threads than normal Apache worker mode would. This is because one thread can handle more than one connection, instead of requiring a new process for each connection.

Using Nginx and Apache both

Apache is known for its power and Nginx for speed. This means Nginx can serve up static content quicker, but Apache includes the modules needed to work with back end application servers and run scripting languages.

Both Apache and Nginx can be used as proxy servers, but using Nginx as a proxy server and Apache as the back end is a common approach to take. Nginx includes advanced load balancing and caching abilities. Apache servers can, of course, be deployed in great numbers. A load balancer is needed in order to exploit this. Apache has a load balancer module too, plus there are hardware based load balancers.

Another configuration is to deploy Nginx with the separate php-fpm application. We say that php-fpm is an application, because it is not a .dll or .so loaded at execution time, as is the case with Apache modules. Php-fpm (the FastCGI Process Manager) can be used with Nginx to deliver php scripting ability to Nginx to render non-static content.

When is Apache preferred over Nginx?

Apache comes with built in support for PHP, Python, Perl, and other languages. For example, the mod_python and mod_php Apache modules process PHP and Perl code inside the Apache process. mod_python is more efficient that using CGI or FastCGI, because it does not have to load the Python interpreter for each request. The same is true for mod_rails and mod_rack, which give Apache the ability to run Ruby on Rails. These processes run faster inside the Apache process.

So if your website is predominately Python or Ruby, Apache might be preferred for your application, as Apache does not have to use CGI. For PHP, it does not matter as Nginx supports PHP internally.

Here we have given some explanation of how Nginx is different from Apache and how you might consider using one or both of them, and which of the two might fit your needs more closely. Plus we have discussed how Apache 2.4 brings some of the Nginx improvements in thread and process management to the Apache web server. So you can choose the best solution for your needs.

はじめまして again

はじめまして、Android/iOS Developerの田中葉子です。


今回は、Wonderfullアプリを支えている開発ツールなどを紹介します。
なお、弊社は、どんどん最新技術などを導入しております。興味があれば、弊社のドアは、いつでも開いております。お待ちしております。

開発ツール

             Android開発環境

             iOS開発環境

ソース管理

             ソース管理は、gitを使っています。

コミュニケーションツール

             昨年から、弊社の技術は、slackを導入しました。各チームは、各channelを作っています。あと、google calendarと連携して、毎朝9時にslackに予定が自動投稿される仕組みを導入しています。

             古きよきchatですね。現在も運営チームとのやりとりなどで使用しております。

UI design tool

             弊社では、デザイナーさんが、アプリのUIをsketchを使って作成します。それを、エンジニアが受け取り、幅、UI部品の配置をしております。

test/debugなど

              iOSAndroidアプリをUSBの接続なしに、遠方のユーザ、テスターの端末に配布できます。あと、ここのサービスは、導入までのチュートリアルが非常に親切で素晴らしいです。

              crashlyticsは、上記のdeploygateのアプリの配布機能に加えて、専用のSDKを組み込むことにより、どこの箇所で落ちたのかのレポートが、管理画面に確認可能です。

バックエンド

             弊社アプリwonderfullのバックエンドは、awsを使用しております。

情報収集

              feedlyに、自分の興味のあるIT,マーケディング,Startup関連を登録して、毎朝出社したら、一読しております。

ECサービスの超基本なマーケティング用語まとめPart1

こんにちは。プロダクトとマーケティングを担当している鈴木です。
私達InagoraはECアプリWONDERFULLを運営しています。
毎日いろいろなデータと指標を元にプロダクトを作ったり、マーケティング手法を変えたりしています。
今回は最初のポストということもあり、超基本的なマーケティング用語をずらっと並べてこれからInagoraにジョインする未来のプロダクター、マーケターの一助になればと思います。

続きを読む