Svelte 入門 - アクトインディ開発者ブログ
morishitaです。 今回は JavaScript の UI フレームワーク Svelte を紹介します。 アクトインディでは今の所、フロントエンドフレームワークとしては Vue.js を使っていますが、これもなかなか良さそうだと思ったのでちょっと触ってみました。 プロジェクトの初期化から、次を使えるようにするまでを書きたいと思います。 typescript pug sass jest eslint Svelte とは Web フロントエンド開発のための UI フレームワークです。 2019 年にリリースされた Svelte3 で大幅にアップデートされたようです。Vue の SFC によく似たマークアップ、スクリプト、スタイルを１ファイルに記述する Svelte コンポーネントとしてアプリケーションを実装します。 ライブラリではなくコンパイラとして働き、ビルドするとブラウザで実行できる
Nuxt.jsのネストした動的ルーティングで困ったので調べてみた - アクトインディ開発者ブログ
morishitaです。 SPAモードで動作するNuxtアプリケーションでネストした動的ルーティングの動作が思ったのと違ったので調べてみました。 やりたかったこと Railsのノリで次のようなパス階層をNuxt.jsでやりたいと思いました。 パス 説明 / サイトトップ。 /groups/:group :groupに対応したグループの詳細。 実際には所属メンバーの一覧 /groups/:group/members/:member グループ:groupに所属する メンバー:memberの詳細。 ※ :group、:memberはそれぞれのID（自然数）です。 複数のグループが存在し、そのそれぞれに所属するメンバーがいるというよくあるアプリケーションです。 期待したこと 公式ドキュメントの動的でネストされたルートを参考に次のようなファイル群を作りました。 pages/ ├── index.vu
Vue.jsでWeb Componentを作ってみた - アクトインディ開発者ブログ
morishitaです。 先日、Web Componentついて書きました。 tech.actindi.net 多くのブラウザで動作できるようになってきていることは確認できました。 ただ、実装方法についてはもっと良い方法がないものかと思いました。 と思っていたら、Vue.jsが Web Components もサポートしているではないですか！ で、やってみました。 環境準備 手っ取り早く試すためにVue CLIを使います。 次のコマンドでインストールできます。 $ yarn global add @vue/cli インストールできたらプロジェクトを作ります。 このエントリではvue-web-componentsという名前で作りますが、 なんでも構いません。 次のコマンドを実行するといろいろ質問されます。 $ vue create vue-web-components 今回は次の様に答えまし
Web Componentsを試してみた - アクトインディ開発者ブログ
morishitaです。 プログラムを部品化して再利用したい。 コードを書く人間にとってはいつも考えていることですし、永遠のテーマなのではないかと思います。 オブジェクト指向はクラスとしてパッケージしたコードを再利用する仕組みを提供します。関数型言語は関数で。 言語レベルでなくても、コードを分割し再利用する仕組みはフレームワークやビルドシステムなどいろんな形で存在します。 Web Components もそんな再利用の仕組みの1つです。 ちょっと前に、「すでにモバイルではポリフィルなしでも使える状況になってきている」と聞きかじって気になっていました。 で、ちょっと試して見ました。 なお、このエントリではPolymerなどの polyfill は使いません。 Web Componentsとは？ Web ComponentsはざっくりいうとオリジナルのHTMLタグを作るための仕組みです。JSP
NuxtのSPAを S3＋CloudFrontでホストする。デプロイはCodeBuildで自動化 - アクトインディ開発者ブログ
≪2019/06/20追記≫ この記事を公開したのは2018-10-19です。 2019-06-20時点でより簡単さ、運用の容易さを求めるならAWS Amplify Consoleもおすすめです。 tech.actindi.net morishitaです。 Nuxt で実装した SPA を S3 + CloudFront で配信する機会があったのでそれを書きます。 NuxtのSPA自体については、標準的な作りでTypescript、Pug、 Sassを使ってますよってことぐらいしか書くことがないのですっ飛ばして、 S3とCloudFrontでどのようにSPAをホストしたのか、そしてCodeBuildを使ったデプロイの自動化について書きます。 概要は次のとおりです。 NuxtのSPAをホストするための S3とCloudFrontを設定する CodeBuildを使ってS3にデプロイする GIt
workbox を導入してServiceWorkerによるキャッシュを実装した話 - アクトインディ開発者ブログ
morishitaです。 いこレポに workbox を導入してServiceWorkerによるキャッシュを実装しました。 そのことについて書きます。 導入の背景 いこレポはおかげさまで順調に成長できており、アクセス数も伸びてきています。 先日 1 周年を迎え、ますます頑張っていなかければと思っている所存です。 report.iko-yo.net いこレポのトラフィックは現状、オーガニック流入が最も多く新規ユーザが大部分を占めています。 それはそれで良いのですが、多少、成長の質にも目も向けられる様になり、 リピータを増やしたいなぁと思い始めました。 メディアの本分としては、魅力的なコンテンツでユーザを惹きつけるということに注力するのですが、それは編集チームのみなさんが頑張ってくれています。 私はエンジニアなのでエンジニアとしてやれることは何かなぁと考えたときに A2HS をもっと使ってもら
Webpagetestでサイトのパフォーマンスを定期計測する - アクトインディ開発者ブログ
morishitaです。 今回は社内でプライベートに運用している Webpagetest について紹介します。 日経新聞やDev.toなど爆速を実現している Web サイトが度々話題となります。 それは Web サイトにとってページの表示速度が非常に重要で関心が高いからだと思います。 サーバサイドの速度も重要ですが、近年、クライアントサイドの描画スピードのチューニングにも注目が集まっています。 残念ながら爆速といえる状態は実現できてはいませんが、 いこーよやいこレポでもページの表示速度は重要だと考えていて絶えず改善を続けています。 速度改善は計測から始まります。 まず現状を計測してボトルネックを把握し、改善施策を実施してまた計測、そして前後を比較する。 それにより施策の効果を測ることができます。 その計測、皆さんどうしているでしょうか？ 手っ取り早いツールとしては Chrome のデベロッ
Communication APIs for SMS, Voice, Email & Authentication | Twilio
Products Communications Messaging Send and receive multichannel text and media messages in 180+ countries
CouchDBとMongoDBの使い分け - モジログ
CouchDBとMongoDBをしばらく使ってみて、その使い分けのポイントがわかってきたような気がするので、ちょっと書いてみたい。 CouchDBとMongoDBは、広く「NoSQL」と総称されている非SQL型データベースのうち、「ドキュメントデータベース」と呼ばれるカテゴリを代表する２つだ。ドキュメントデータベースとは、かんたんにいうと、JSONデータ（＝ドキュメント）をそのままデータベースに保存できるというもので、従来のRDBのような「スキーマ」がない。複数のテーブルを結合（join）するという使い方をせず、一意キーの指定や比較的単純なクエリーでJSONデータを取り出す。 ここでは詳しい話には踏み込まず、２つのデータベースの違いを私の主観で、ごく大雑把にまとめてみる。 まず、それぞれの強みを私の印象で３つずつ書くと、こんな感じだ。 CouchDBの強み： １）優れた管理画面「Futon
無料でダウンロードできる洗練されたデザインのUIキットいろいろ
わかりやすく、統一感のあるウェブサイトをデザインする時にあると便利なのがUIキットですが、ウェブ開発・デザインに関する情報やコンテンツを扱うブログBest Open Source Resourcesがそんな美しいデザインのUIキットをリスト化しています。明るいグレーやダークなカラー・木目調など、さまざまなパターンのPSDファイルが無料でダウンロードできるため、頭の中のイメージに合わせてコンテンツを選ぶことが可能です。 A Comprehensive Collection of Free UI Kits & Templates | Web Resources | WebAppers http://www.webappers.com/2012/11/12/a-comprehensive-collection-of-free-ui-kits-templates/ ◆01："Pizza" UI K
userAgent一覧
ブラウザの判別や携帯の機種判別に利用するためのユーザーエージェント一覧です。ただし、ユーザーエージェントは詐称（偽物）される場合があるため、完全にユーザーエージェントでブラウザなどの判別ができるわけではありません（詐称の方法のページを参照）。ここに掲載されているものは、このサーバーなどに対してアクセスしてきたユーザーエージェント名などを抽出したものなどです。あまりに古いブラウザおよびマイナーなブラウザに関してはアクセスログがないため掲載できていません。 [トップページに戻る] ■iPhone ●iOS Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3 ●iOS2 Mozilla/5.0 (iPhone
Windows でコマンドラインから WEB サイトのスクリーンキャプチャを取得する
Webサイトのスクリーンショットを取得するには通常、FirefoxやChromeのアドオンを使用するのが便利です。ですが大量のWebサイトのキャプチャを取りたいとなると非常に手間がかかります。そこでWindows用のフリーウェア「CrenaHtml2jpg」を利用して、コマンドラインからWebサイトのキャプチャを取得してみましょう。 CrenaHtml2jpgはコマンドラインから呼び出すことができ、オプションを指定することで動作をコントロールすることができます。何を指定するとどのような動作になるのかは、同サイトに記載されています。 まずCrenaHtml2jpgをダウンロードします。 解凍をして展開されたら、コマンドプロンプトを起動してそのディレクトリに移動します。そして下記のコマンドを実行するとCodaholicのフルキャプチャを取得することができます。
Diaspar Journal: ブラウザ評価ツール
2009年1月22日木曜日 ブラウザ評価ツール ブラウザの評価ツールを集めました。 「JavaScript のパフォーマンス」「ウェブ標準への準拠状況」を評価できます。 2009-04-14、TaskSpeed を追加。 合計で 12 件あります。 JavaScript のパフォーマンス Dromaeo - Mozilla JavaScript performance test suite DOM やライブラリを含む。 V8 Benchmark Suite - V8 JavaScript Engine - Google Code DOM を含まない。 再帰に比重。 SunSpider - JavaScript Benchmark - WebKit DOM を含まない。 Web Browser Javascript Benchmark - .: Celtic Kane 第3版？ シンプル。
HTTP入門
GET / HTTP/1.1 Accept: image/gif, image/jpeg, */* Accept-Language: ja Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;) Host: www.xxx.zzz Connection: Keep-Alive これに対してサーバは下記のような応答メッセージを返します。 HTTP/1.1 200 OK Date: Sun, 11 Jan 2004 16:06:23 GMT Server: Apache/1.3.22 (Unix) (Red-Hat/Linux) Last-Modified: Sun, 07 Dec 2003 12:34:18 GMT ETag: "1dba6-131b-3fd3
www.webmproject.org
WebM: an open web media project The WebM Project is dedicated to developing a high-quality, open video format for the web that's freely available to everyone. Learn more » WebM Project joins the Alliance for Open Media Cisco, Google, Intel, Microsoft, Mozilla and Netflix join forces on open media formats … More » Codec Developers WebM is an open-source software project that anyone may participate
無料サービスを使え！ – 役立つ無料サービスのレビュー、まとめ、比較記事を紹介
コンテンツへスキップ 無料で使える！HubSpotの顧客リストの活用法 無料のアンケート作成ツール 比較／まとめ 無料「Excel」 テンプレート 比較／まとめ 無料で使えるノートアプリ比較 (Evernote / OneNote / Google Keep) おすすめの無料Web会議システム5選 WebP Converter 徹底解説！初心者でも直ぐに使える HubSpot は、マーケティング、セールス、サービスのためのCRM（Continue reading 多くの人の声を聞くことで改善できることも多い 企業や団体など運営していContinue reading 就職・転職には必須となる履歴書・職務経歴書 これから就職活動をスタートContinue reading 便利なノートアプリで効率的な仕事をしよう いつの時代も仕事をしていてメContinue reading 近年、リモートワーク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raible Designs | Java Web Application Security - Part III: Apache Shiro Login Demo
http://hmdt.jp/coral/
HTTP 1.2 がリリース，階層構造とテキスト-メニューインターフェースのサポート向上（4月1日記事）
VMware Tanzu Spring Runtime