Railsで作られたサービスにVue.jsを導入したというお話
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か?ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは? - GIGAZINE
はじめに 日本のIT業界では、技術職求人に対して、ちゃんと専門教育を受けていない(独学で身につけたわけでもない)人の応募の割合がとても高く、絶大なる不幸を生み出しているのが現状です。 これから社会人になる就活生の皆さんには、できれば不幸な人生ではなく幸せな人生を歩める選択をしてほしいとの願いから、このエントリーを書きました。 注意:ITエンジニアとして就活をしてプログラマー的な仕事が主な業務になる人が多いと思うので、この記事に出てくるITエンジニアという言葉は、プログラマーのことだと思って読んでいただけると幸いです。広い括りの題名をつけてしまってすみませんが、インフラ/ネットワークエンジニアやメーカーのエンジニアの話は出てきませんので、ご容赦ください。 目次 背景 プログラミング言語を覚えよう データベースの使い方を覚えよう オリジナル作品を作ろう(ここが一番大事) IT系の勉強会に参加し
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 「MongoDB」はNoSQLの中でもドキュメント型NoSQLに分類されます。MongoDBは他のNoSQLと同様に、リレーショナルデータベース(RDBMS)と比較してビックデータや非構造データの処理が得意といった特徴がありますが、ここではそういったNoSQLの一般的な特徴の紹介は割愛し、他のNoSQLとは違うドキュメント型NoSQLならではの特徴、そしてMongoDBならではの特徴を紹介します。 ドキュメント型ならではの特徴 ドキュメント型NoSQLではデータとして階層型データ構造であるJSONを扱います。図1にRDBMSのリレーショナルデータ構造、キーバリューストア(KVS)のキーバリューデータ構造、ドキュメント型NoSQLのJSO
先週、私たちはWebサイトを検索エンジン向けにインデックス付けできるようにしようとしていました。この記事では、私たちがWebサイトを書き直していて学んだことの要約を紹介したいと思います。 背景 2ヵ月前に RisingStack.com を作成した時、私たちはそのWebサイトでどんなテクノロジを使うか決めなくてはなりませんでした。イベントを追跡する静的なページが数ページあるだけだったので、とても簡単でしたが、私たちはWebサイトをスケーラブルでできるだけ高速なままにしておきたいと考えていました。 私たちのチームは AngularJS の経験が豊富なので、フロントエンドにAngularを選ぶのは妥当だと思われました。 この記事はReactやAngularJSがどちらか一方より優れている理由について述べているわけではないので注意してください。どちらがいいかは常にユースケース次第です。 “Ang
継ぎ足しを繰り返して複雑な味になった設定ファイルや、入れてみたけど結局使っていないアプリ等を見直しつつ、今まで使っていたMacBook Airから違和感なく乗り換えられることを目標に、やったことのメモ。 デスクトップには何も置きたくないし、Dockはこう しておいて、こんな感じ で今使っているアプリだけが表示されるようにしたいタイプです。 GUI アプリ 基本的にはMacBook Airに入れていたもののうち、日常的に使っていたものだけ残した。 Webブラウザ 以前は、Googleのアカウントを切り替えるのが面倒だったので、いくつもブラウザをインストールしてブラウザとGoogleアカウントを1対1で紐付けていたけど、Chromeでアカウント切り替えが楽になったので、そういうダサいことはやめた。 Google Chrome Canary インストールしたExtensionは以下。 Evern
最近JavaScriptフレームワークについて色々指標のようなものを提示するブログが流行っているようだ。適材適所のもと、これは大規模向きとか小規模向きとか早いだの遅いだの。加え「gitなんか覚えなくたって死なない」とか、UXうえい!みたいな話だと思いきや内容がUIに限ったこととか。 一体最近のフロントエンドはどうなってるんだ?という雰囲気になってきましたので、少しメモ的に書きました。 JavaScriptフレームワークについて JavaScriptフレームワークの状況を見ると(フレームワークかライブラリかの議論は置いておき) DOM Web Components Virtual DOM に分かれます。JavaScriptフレームワーク初期の頃はDOMを直接操作するものが多く出現してきましたが、レスポンスなど扱いに難しい面もあり、他のアプローチが考案されました。それがWeb Compoent
「LINEに脆弱性」「個人情報が漏れる・盗まれる・盗聴されるおそれ」系のニュースが昨日あたりにどばっと出ていたのを見て、公式ブログのお知らせを読んでみたのですが、ニュースやニュースに対する反応を読んで受けた印象からすると「あれ?」と思った部分があったので、見比べた時のことをメモしておきます。ちなみに最初に書いておきますが、LINEは最新版にアップデートしておきましょう。「最新版じゃなくても大丈夫そうだからアップデートしない」というのをおすすめしたいわけではありません。 目次 1. 「アップデートしないと履歴や写真などが抜き出される」2. ニュース例3. 脆弱性発見元の文章4. LINE公式を読んで「あれ?」と思ったところについて4.1. 「対応内容」4.2. 「FAQ(よくある質問)」5. 仮説:アプリをアップデートで修正後、サーバ側でも対策→アップデート無しでも対策済み状態に?6. とは
こんちは。ライターのチルドです。 近年、爆発的なスマートフォンの普及により、小学生からお年寄りまで、老若男女がインターネットへ、陽気なマインで愉快にジョインする時代になりました。 そこに登場したのがMVNOと呼ばれる格安SIMです。これはドコモやソフトバンクといった大手通信キャリアが提供する5000円〜7000円の定額データサービスと比べて、通信料が格段に安いのが特徴です。販売はプロバイダーと呼ばれるさまざまな事業者(イオンや家電量販店など) が行っています。 スマートフォン端末とSIMカード、月々1000円程度の基本料金を支払うだけでインターネットへ接続できることから、さまざまな事業者が参入して利用者も拡大傾向にあります。 しかし、その安さには理由があります。ひとつは通信速度が遅いこと。もうひとつは通信量が制限されることです。 今回は、その安さにまつわるデメリットについてご紹介していきた
WEB界隈でよく聞く言葉に「チートシート」というものがあるのですが、これは「cheat(チート) = 騙す、ズルする」という言葉から「ズルするシート」要するに「カンニングペーパー」のことを意味していて、これが転じてWEB界隈ではプログラミング言語やコマンドやショートカットなどを見やすく一覧にまとめてある表のことを指します。 ちなみにこの記事では少し趣向を変えて、WEB界隈で働く人が「これは便利かも」と重宝しそうな「マーケティング」と「SEO」に関するチートシートを集めてみました。 WEBマーケティング関連のチートシート3+2個 大きな意味での「WEBマーケティング」全般に重宝しそうなチートシートを集めてみました。 www.seojapan.com リスティング広告運用チートシート LPO改善チェックリスト チートシートではないけど「これはWEBマーケティングに重宝するかもなー」というチェッ
システムを運用していく上で cron を使う場面はよくありますよね 処理をスケジュール実行したい時にとても便利です そんな cron ですが、最近仕事で作業しているときに ntpdate でシステム時刻を変更した後に cron で設定した時刻になってもジョブが実行されないという問題が見つかりました 全てのジョブが実行されていないわけではなく一部のジョブは実行されているようでした また、時刻を変更した後に crond を再起動すれば全てのジョブが正常に実行されるようになりました 幸い、実運用ではなくてシステムテスト中に見つかった問題なのでまだよかったんですが、運用している環境で同じ問題が起きたら相当マズイですよね そもそも ntp の時刻同期でシステム時刻が修正された場合にも同じ問題が起きそうじゃないですか? ググっても同じような事象は見つからず、社内のメンバーにも聞いてみても cron で
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと
RailRoad is a class diagram generator for Ruby on Rails applications.RailRoad is a class diagrams generator for Ruby on Rails applications. It's a Ruby script that loads the application classes and analyzes its properties (attributes, methods) and relationships (inheritance, model associations like has_many, etc.) The output is a graph description in the DOT language, suitable to be handled w
このウェブサイトは販売用です! gachinko.org は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、gachinko.orgが全てとなります。あなたがお探しの内容が見つかることを願っています!
「週100時間働け」 世界最高の起業家イーロン・マスクが若者へ捧げる“5つの金言” 南カリフォルニア大学マーシャル経営大学院 卒業式 2014 イーロン・マスク テスラ・モーターズCEOのElon Musk(イーロン・マスク)氏が、南カリフォルニア大学マーシャル経営大学院で行った卒業スピーチです。「超多忙であれ」「リスク負え」など、人生を成功に導くための5つの原則を紹介し、社会へ羽ばたく卒業生を激励しました。 超多忙であれ イーロン・マスク氏:5、6分のスピーチで思いつく限りの真実を語らないといけないわけですね? では、やってみますか。いくつかありますがどれも重要なことだと思います。聞いたことがあるようなものもありますが、言う価値はあると思います。 まず言いたいことは、「超多忙であれ」ということです。何を仕事にするかにもよりますが、特に最初の職場ではとにかく忙しく働く必要があります。「超多
Sassは非常に便利なのは重々承知です。その恩恵はありがたくいただいております。ただ個人的にはSassが優秀すぎてどこまで効率的にできるのかいまいちわかっていない部分があります。そんなわけで今回は@extendと@mixinの違いについて整理をば。 @extendの特徴 @extendが行なってくれることを一言で表すと「継承」です。つまり受け継ぐわけなんです。なにを言っているのかわからない!って僕も最初思ったので実際にコードにしてみました。 [HTML] <div class="box1">コメント表示エリア(高さ250px)</div> <div class="box2">コメント表示エリア(高さ300px)</div> [Sass] .box-base{ float: left; width: 200px; height: 200px; border:1px solid #aaa; b
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル/シェルスクリプトで簡単にコマンドを実行する GUI(Koala)で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト(Nested Roles) 親セレクタの参照 &(アンパサンド) プロパティのネスト(Nested P
個人情報の漏洩につながるような2000種類以上のデータトラッキング用のコードをブロックし、ついでに一部広告やSNSボタンもウェブページ上から非表示にしてしまうことでページの表示を最大27%も高速化してしまうブラウザの拡張機能が「Disconnect」です。開発者は元Googleのエンジニアで、オンライン上での個人情報をユーザー側でしっかりとコントロールできるようにするために開発したツールとのことなので、どんなふうに動作するのか実際に使ってみました。 Disconnect | Online Privacy & Security https://disconnect.me/ ◆PC向けの拡張機能を使ってみた 「Disconnect」はGoogle Chrome・Firefox・Safari・Opera向けに拡張機能をリリースしており、以下のページにアクセスして「Get Disconnect」を
DockerをGUIで簡単利用できるKitematic、Dockerが買収。Windows版が5月か6月に登場予定 Kitematic(説明動画によると「カイトマティック」と発音するようです)はMacOSで簡単にDockerを導入、操作できるツールです。 KitematicはDockerの実行環境となる仮想マシンのVirtualBoxとLinuxをMacOS上へ自動的にインストールし、GUIからDocker Engineのコンテナで起動するアプリケーションの一覧をDocker Hubから取得して一覧表示、クリックすればすぐにDocker上でアプリケーションを起動できるというもの。 Today with Kitematic, we take another step in simplifying the developer experience and making Docker acces
2013年からTech Reportが継続していた「SSD耐久試験」は、SSD主要6モデルに特別なプログラムを使って尋常ではない量のデータを書き込みまくって再起不能まで追い込むというもので、耐久性に不安を持たれがちなSSDの信頼性を判断するのに大いに役立つデータとして注目を集めています。そして、最後まで生き残ったモデルもついに息の根を止められ、1年半にわたって続けられたSSD耐久試験が完全に終了。そこからSSDの信頼性に関するおそるべき事実が明らかになっています。 The SSD Endurance Experiment: They're all dead - The Tech Report - Page 1 http://techreport.com/review/27909/the-ssd-endurance-experiment-theyre-all-dead ◆これまでのテスト経過
Ruby の Date#parse はJST明示しないと怖い。 Datetime#parseは JST を付けないと、UTCとして解釈するので恐ろしい 明示する方法 >> DateTime.parse("2013-09-12 3:39 JST").to_s => "2013-09-12T03:39:00+09:00"または +9:00を付ける >> DateTime.parse("2013-09-12 3:39+9:00").to_s => "2013-09-12T03:39:00+09:00"あたりまえっちゃあ当たり前。
抽象的なことよりも具体的なことのほうが理解しやすいため、目で見て手に触れることが学習の第一歩に適しています。しかし、プログラミングなどのコンピュータ学習は、背景の仕組みを見るのが難しく、ましてや手で触れることができないため、学習の初期段階でスムーズな第一歩を踏み出すことができずに投げ出されがち。そのようなコンピューティングやエンジニアリングの卵たちの「成長の芽」を育てるために、手で触れていじくり回すことができる上に、用いられるツールが大人気ゲーム・マインクラフトという、遊びながらコンピューティング体験ができる学習キットが「Piper」です。 Piper: a Minecraft Toolbox For Budding Inventors by Piper — Kickstarter https://www.kickstarter.com/projects/withpiper/piper-a
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
概要 Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。 「Vue.jsで遊んでみた」のような記事はよく見るのですが、実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで、どのようにするのがベストなのかを、まとめました。 SPAをベースに、サーバーサイド言語上で動かすときの構成も調べています。 ブラウザサポート yyx990803/vue - Vue.jsはレガシー・ブラウザをサポートしていません。 参考記事 Getting Started - vue.js Vue.js概要? - Qiita - はてぶ200 大きめのアプリケーション構成について ガイドライン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く