『Ameba OwndのSEOを支える技術 for AngularJS』
こんにちは、サーバーサイドのエンジニアをやっているoinumeです。今回は昨年8月ぐらいから作っていたAmeba Owndというサービスで行ったSEO対策について紹介します。 AmebaOwndって？ブログ機能を備えたスタイリッシュなデザインのWebサイトを簡単に作成できるサービスです。 香川真司オフィシャルサイトスターバックス コーヒー オフィシャルブログなどのサイトがAmeba Owndを利用して作られています。 アーキテクチャユーザーさんがWebブラウザでアクセスするページについてはAngularJS + REST API(Nginx + Go)で作られています。一方でGooglebotなどのクローラーからのアクセスの場合は、受けたリクエストをNginxがPrerender CacheというシステムにProxyして、このPrerender CacheからHTMLを返すようにしています
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
Fluxフレームワーク Arda が気になる10の理由 - Qiita
Help us understand the problem. What is going on with this article? どうも、@armorik83です。 Fluxフレームワーク"Arda"、皆さんご存知ですか? 概念や思想を含めて大々的に発表されたのは、おそらく2015年2月16日（記事掲載時点でおととい）という新たなOSSです。 開発者は@mizchi氏。Qiitaの中の人 (Kobito)、魂が震えてる人、Reactの人として有名かと思いますが、個人的にはAngularJSが嫌いな人という認識です。 今回、そんなmizchiさんが開発されたフレームワーク"Arda"をあえて取り上げたい衝動に駆られたので、興味のある方はお付き合い下さい。 動機 気になった理由の前に、ここに至った動機を前置きします。ここ長いです。例のアレな感じです。 思い出話 私は2013年秋からAng
Angularとの2年間 ー これからAngularを使う人への薦め | POSTD
判決： まあまあ（でもないか） 一体何の話なのか？ 私は2年間、Angularにのめり込んでいました。 それぞれの考えを持つさまざまなチームによる、10以上のAngularベースのプロジェクトを見守り、関わってきました。 1年目はフレームワークの採用、APIの変更、ドキュメントの改良、コミュニティの形成を注視して過ごし、徹底的に習得しました。 2年目は実務に全面的に携わり、チームメンバーの意見を聞きました。 私の意見は、 Angular.jsは大多数のプロジェクトには“まあまあ”だが、本格的なWeb アプリ開発には不十分である ということです。 “本格的なWebアプリ”とは？ “本格的なWebアプリ”というのは、長期の 保守が可能 で、最新の一般的なブラウザで 実行できる 、 スムーズなUX を備えた、 モバイルフレンドリー なアプリのことです。 専門家が開発したWebアプリは単なるアプリ
AngularJSリファレンスを読んで書いたりしてみた - bathtimefish's blog
HTML5 Expertsやhtml5j部長のよしみで著者の金井さんに献本いただいたAngularJSリファレンス。 いただいてから結構時間が経ってしまったけど、とりあえずざっと読み通したのでレビューなど書かせていただこうかと思います。 AngularJSリファレンス 作者: 池添明宏,金井健一,吉田徹生,丸山弘詩 出版社/メーカー: インプレス 発売日: 2014/09/05 メディア: 単行本（ソフトカバー） この商品を含むブログを見る まずは献本いただきありがとうございます。恐縮です。 AngularJSはぼちぼち勉強していってるんだけどまだ仕事で使ったことなくて具体的なノウハウがあんまりない感じ。あとディレクティブとかコンポーネントとか興味のある部分しか見てないので全体的な知識があまりない状態。 ボクはそんな感じなのでこの本をいただいて全体的に勉強できるチャンスだなと思った次第です
AngularJSとBootstrapを組み合わせるならAngularStrap - Qiita
AngularJSとBootstrapを組み合わせたライブラリと言えば、UI Bootstrapが最も有名ですが、UI BootstrapよりもAngularStrapの方が好みです。 というわけで、この記事ではAngularStrapの良いところを紹介します。 AngularJSとAngularStrapについて、それぞれ次のバージョンを対象とします。 AngularJS: 1.3.6 AngularStrap: 2.1.4 AngularStrapとは AngularStrapは、BootstrapのUIコンポーネントをAngularJSのディレクティブで再実装したライブラリです。 重要なポイントは次のもの。 Bootstrap提供のbootstrap.jsへの依存はない jQueryへの依存はない AngularJSの依存を除けばBootstrapのCSSに依存しているだけ ただし、
AngularJSアンチパターン集 - Qiita
（150522追記）本稿の続編としてAngularJSモダンプラクティスを掲載しました。本稿は2014年9月に執筆し、情報がかなり古くなっています。続編では、AngularJS 1.4やAngular 2に関する情報をまとめ、入門者への新鮮なチュートリアル、熟練者の移行手引として作成しました。どうぞご覧ください。 この記事は記録のため残します。 AngularJS歴1年の筆者による個人的なAngularJSアンチパターン集です。自分のための戒めとメモを兼ねています。個人差があると思いますので、参考程度に。 また、筆者はTypeScriptで書いています。 Components ComponentsのDI数が6以上になる 危険度★★★ angular.module('myApp') .service('FooService', [ '$q', '$resource', '$rootScope
モダンAngularJS @ GDG中国2014.12.6
AngularJS is a JavaScript framework that allows developers to create dynamic web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are composed of modules, controllers, services and filters that allow creating single page applications with two-way data binding between models and views.Read less
AngularJSとRailsの丁度良い関係を探る：コード解説編 | mah365
以前投稿したAngularJSとRailsの丁度良い関係を探るという記事のコード解説編です。前回はざっくりとしたアーキテクチャの紹介のみにとどめていたので、このエントリでサンプルコードの詳細について解説します。 バージョン情報 ruby 2.1.3 rails 4.1.7 devise 3.2.4 angularjs 1.3.2 ディレクトリ構造 app以下のディレクトリ構造は以下のような形です。 app ├── assets │ ├── images │ ├── javascripts │ │ ├── app │ │ │ └── tasks │ │ │ ├── tasks.controller.js.erb │ │ │ ├── tasks.html.erb │ │ │ ├── tasks.js.erb │ │ │
I am mitsuruog | いま一番気に入っているAngularJSのプロジェクト構成
この記事はAngularJS Advent Calendar 2014 - Adventarの 3 日目の記事です。 2 日目AngularJS BootstrapUI を利用した FilterSelect(@takeyama) 4 日目初心者マークの Angular.js - Uemmra3 のフルスタックエンジニア？日記(@Uemmra3) AngularJS でそれなりの規模のアプリケーションを書く場合、プロジェクトの構成って結構悩みます。 いつも悩んでます。。。 悩みすぎてちょくちょく構成変えるため、たまにアプリケーションが壊れてます。 そんなとき心もポッキリ壊れそうになります。 そんな私が、最近いいなと思っている AngularJS のプロジェクト構成について紹介します。 参考資料(有名どころ) AngularJS のプロジェクトの構成については、結構以前から議論されています。有
オレ流AngularJSを使った設計ポリシー
Chrome MySQL Adminでは、 AngularJSを使って実装を行っています。Chrome appsでは、 何らかのMVC Frameworkの利用が勧められています。 AngularJSは、Controller、Directive、Template、Serviceなど、いくつかの部品群を組み合わせてアプリケーションを構成することになります。その機能の豊富さ故に、実はちゃんとしたポリシーを決めておかないと、いかようにでも作れてしまうために、かえって複雑さが増してしまうという危険性も出てきます。もちろんアプリケーションの作り始めは試行錯誤の連続なのですが、徐々に自分なりのポリシーみたいなものが確立されてくるはずです。 本エントリでは、Chrome MySQL Adminでの設計/実装ポリシーを簡単に紹介してみたいと思います。ちなみに、全てのソースコードは、以下にあります。 htt
Webアプリ構築のためのAngularJS
Webアプリ構築のためのAngularJS 外村 和仁(著), CodeGrid(編) マイナビ出版 2,530円 (2,300円+税) JavaScriptアプリケーションフレームワーク、AngularJSの入門/実践解説書！特徴、基本の使い方から、ディレクティブやテストなど、一歩進んだ活用方法までを簡潔かつわかりやすく解説しています。 関連サイト本書の関連ページが用意されています。 Webアプリ構築のためのAngularJS｜マイナビブックス内容紹介Googleが開発を行っているJavaScriptのアプリケーションフレームワーク、AngularJSの入門/実践解説書。AngularJSはいわゆるMV*と呼ばれる種類のフレームワークで、これを活用することで、Webアプリ構築時にコード量が削減されたり、実装者による品質の差を小さくするなど、生産性が大きく向上することが期待できます。本書で
Angularが好き - Can I do web?
ボクは本当にAngularが好きで、もはや恋するレベルに達していて、今ではもう実案件に使っている。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う → 趣味には口を出しません。そう思うならそうです。 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない →データバインドだったり、Web Components のような、未来にnative実装されるAPIを包括的に実装しようとした結果の１つだと思ってます。 もっといい方法はあるのかもしれないですけど、Angularではこうしてるよっていうのが現状なのかなと。 上記で毒づく程不満はないで
AngularJSは今すぐ生まれ変わるか死ね - Write and Run
mizchi 氏のエントリを踏まえて。 Angularが嫌い - mizchi's blog 何をやるにもググって解決しなければならないぐらいには一貫性がない マジでこれ。設定が多すぎる。特に directive 定義。どうやら Web Components の流儀に沿うようになっていて、将来的には Web Components に乗っける、ということらしいが、そもそもの Web Components の仕様が汚いし、救いようがない。 参考: AngularJS: Developer Guide: Directive 制御構造と要素を分離してねぇせいで replace とかいうオプションが生えてるし、tranclude との組み合わせでより複雑なことになるし、isolated scope な directive は併用できないとか、ng-repeat で作られた scope の下に他の d
Angularが嫌い - mizchi's blog
僕は本当にAngularが嫌いで、もはや許せないレベルに達していて、今ではもう本当に使いたくない。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない Googleだから許される、みたいなコミュニティの驕りが本当に嫌 Angularの都合だけでChromeでObject.observeを前倒しするのやめろ Angularの内部モジュール同士が密結合 DI, module, factory, それぞれ大きなテーマなのに密結合 使いはじめるとAngularをやめることが困難 パフォーマン
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
Impress Japan
コンポーネントの作成から実装まで学べる！ 発売日： 2024/7/23 好評発売中 Web作成・マーケティング 詳細を見る
AngularJS入門の巻２
5. - 今日の内容 - 1. 前回の内容を図で復習の巻 2. 値を入力してみようの巻 3. どんな風に監視してんのの巻 4. 繰り返し表示も出来るよの巻 5. サービスの動きを検査しようの巻 7. addLeft : function(){ numData.leftValue++; } services app controllers calculatorServ numDataModel http://jsfiddle.net/itokami1123dev/b3mTU/1/ CalculatorCtrl DOM angular.module $scope.numData {{numData}} ng-click= "plusBtnlicked()" $scope. plusBtnlicked 前回の内容を図で復習してみましょう！ getNumData: function(){ retu
AngularJS入門の巻
5. - 今日の内容 - 1. 立ち上がれAngularの巻 2. moduleは俺のロッカーの巻 3. 依存してしまおうの巻 4. ブラウザ(DOM)に値を表示の巻 5. データ管理はサービスよの巻 6. データの反映は何時？の巻 7. <script src=“//ajax.googleapis.com/ajax/libs/jquery/ 2.1.0/jquery.min.js”></script> ! ! ! <script src="https://ajax.googleapis.com/ajax/libs/ angularjs/1.3.0-beta.7/angular.min.js" ></script> ! ! <div class="jsTestApp" > {{ 1+1 }} </div> AngularJSのライブラリです！ AngularJSの機能で {{ 1+1 }}
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
