1000万以上のWebページを AMPにした話 / making_over_10million_amp_pages - Speaker DeckHTML5 Conference 2018のLT資料です。 https://events.html5j.org/conference/2018/11/
コルシス、多言語サイト用 Movable Typeプラグイン「MT Translator」最新バージョンでポストエディット機能を追加 - CNET Japan
コルシス、多言語サイト用 Movable Typeプラグイン「MT Translator」最新バージョンでポストエディット機能を追加 株式会社COLSIS（本社：東京都世田谷区、代表取締役：桐田 寛之、以下「コルシス」）は、多言語サイト制作用 Movable Typeプラグイン「MT Translator」にGoogle Translator APIと連携したポストエディット機能を追加しました。既に運用しているMovable Typeで作られたウェブサイトに「MT Translator」を導入することで多言語サイトの複製、機械翻訳、人力校正までをスムーズに実現することが可能です。 [資料: リンク ] 「MT Translator」は、これは日本語サイトをベースに、多言語サイトを構築するために必要なさまざまな機能を有しており、効率的に多言語サイト制作・翻訳作業が行えるようになっています。
エンジニアやデザイナーにおすすめのChrome拡張機能5選
GoogleのChromeストアでは、便利な機能を持つ拡張機能が数多く提供されています。 業務内容にあわせて自分に最適なツールをインストールすれば作業効率アップが期待できますが、拡張機能の数が多すぎてどれをインストールしたらよいのか迷ってしまうことはないでしょうか。 今回は、エンジニアやデザイナーをはじめとしたWeb開発業務の方におすすめのChrome拡張機能5選を紹介します。便利なものは取り入れて、作業を効率化して行きましょう。 エンジニアやデザイナーにおすすめなChrome拡張機能5選 1.DevTools Theme: Zero Dark Matrix Chromeウェブストア 「DevTools Theme: Zero Dark Matrix」は、Google Chromeデベロッパーツールの視認性を高めてくれる拡張機能です。 Google Chromeのデベロッパーツールは、デフ
Googleタグマネージャでクリックイベントを設定しよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのなっちゃんです。 ここ数ヶ月この連載を続けていて「読んでるよ」「勉強になったよ」と声をかけてもらうことが増えました。私自身も、Googleアナリティクスについてはまだまだ知らないことが多いので、初心者の人にも伝わるように言葉を選んだり、キャプチャを入れたりして記事を書くように意識しています。 今日もこの記事を読んでいる人のGoogleアナリティクスLIFEがちょっぴりハッピーになるように、一生懸命、記事を書いていきますね。 ではでは、前回のおさらいです。 前回の連載ではGoogleタグマネージャでGoogleアナリティクスを連携するところまで説明いたしました。 ここまでだったら、別にGoogleタグマネージャを使う必要はありませんね。 なので、今回からはいよいよ、クリックイベントの設定方法について説明いたします。とっても便利なので、ぜひ挑戦してみてください！ 今
WebからIoTまで！Milkcocoaを使って超簡単にリアルタイム通信を実装してみよう | creive【クリーブ】
こんにちは。Webエンジニアの田島です。 みなさんは今までサービスやコンテンツを作っていて、以下の様なことを思ったことはないでしょうか。 Web上でユーザ同士がチャットできる機能を実装したい Google Driveのように、複数人で同時にファイルを編集できる機能を提供したい パソコンとスマートフォンを連動させて、スマートフォンからパソコンを操作できるようにしたい Raspberry Piで取得した値を即時にWeb上で見られるようにしたい これらを実現するために共通する必要な要素が「リアルタイム通信」です。 今までリアルタイム通信を実装するには、サーバーを用意し、Node.jsやWebSocketといった技術を使ってリアルタイム通信特有のプログラムを記述する必要があったのですが、今回紹介するMilkcocoaというサービスを使えば、それらがなんとサーバーを用意することなく、フロントエンド側
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
クライアントに「とりあえず作ってみて。みてみないとわからないから」と言われた時のディレクターの返し方
先日、「とりあえず作ってみて。みてみないとわからないから」というつぶやきがTwitter上で話題になり、その一連の流れをまとめたtogetter上の記事が物議を醸した。 という事がありました。 「とりあえず作ってみて。みてみないとわからないから」つぶやきまとめ」 んで、この記事に対して僕がディレクターとして思ったことがあったり無かったりしましたので、ちょいと書いてみようかと思います。 ナカムラが思ったこと。 これってディレクターが前段階でもの申してやればなんとでもなることじゃね？ まず、クライアントの意見は全部入れるとだいたい見当違いのものができあがることが多いです。もうね、これは仕方ないと思う。だって企業の担当者はWEBの専門家では無い場合がほとんどなんだもの。 だから、どんなものができるのかイメージできない。 結果として「とりあえず作って見せてよ。お金出してるでしょ？」というスタンスに
Windows10＆Microsoft Edge登場！新ブラウザを迎えるために知っておきたい要件まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Windows10＆Microsoft Edge登場！新ブラウザを迎えるために知っておきたい要件まとめ こんにちは、ディレクターのあゆみです。 少し前からそわそわと世間を賑わせていたWindows10と新しいWebブラウザ「Microsoft Edge」について、提供開始日が2015年7月29日と発表されましたね。 思いの外早くてびっくりした1秒後に思ったのです。 「いまやってる案件のローンチ、全部8月以降やん……」 Webの制作に携わるみなさんなら、最初の要件定義で毎度「頼むからIEは10からにして……」と祈っていることかと思います。Edge自体の発表があったときも、社内であれこれと憶測が飛び交いました。 「名前が変わるだけであれはIEだ」 「いやいや、まったくの別物って海外のレポートに書いてあった」 悲しいことにすっかり悪名が一人歩きしているIEですが、実際のところどうなのでしょうか？
Webサイト制作に使えるおしゃれな無料アイコンサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 Webサイト制作をする上で欠かせないアイコン素材。デザイン性にこだわりたくても、「一からデザインしている時間がない！」という方もいますよね。 そこで今回は、数あるアイコン素材の中から、デザイン性に優れたおしゃれな無料アイコンを厳選してご紹介します。 線で構成されたライン系アイコンやシンプルなフラットデザイン、手書き風のアイコンなどをテーマ別に紹介しているので、これから制作するWebサイトの雰囲気に合わせてご活用ください。 なお、今回は基本的にロイヤリティフリーで使用できるものを集めましたが、ご利用になる際は各配布先にて利用許諾範囲を必ずご確認ください。 ※この記事は、2015年に公開されたものを最新情報を踏まえて編集部で再編成しました。 シンプル・フラットなデザインがおしゃれな無料のラインアイコン Streamline https://www.stre
スケジュール作成を簡単に！無料ツールのGantterを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはディレクターのはるかです。 突然ですが、皆さんはスケジュール作成ツールを使用していますか？ 私は今までずっとExcelでスケジュール作成をしていたのですが、スケジュールに調整が入ったりすると、修正するのが大変で… もっと手軽にスケジュールを作成、調整したいと思い、 Gantterを使ってみました。 ちなみにGantterを選んだ理由は 無料である事。 日本語表記である事。 GoogleDriveと連動できる事。 の3つです。 特にGoogleDriveに連動できると社内（チーム）で共有がしやすいので、私にとってこの点は結構重要でした。 今回はこちらの基本的な使い方をご紹介します。 Gantterの使い方 1. サイトへ http://www.gantter.com/ 今回はGoogleDriveで使用しますので、「gantter editions」から「FOR Google Dr
経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン
2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ | Cappee Design
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説！ ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。（そこまでまだ使いこなしてないので、正しくは「できそうです」。） せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MT Translator｜3rdFocus Movable Typeの便利なプラグイン、テーマ、解説書
http://recipi.jp/study/2015/08/22/%E5%9C%9F%E6%97%A5%E3%81%A7javascript%E3%82%92%E7%8B%AC%E5%AD%A6%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1%E3%82%AB%E3%83%AA%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%A0/%E2%80%9Chttp://recip
Kamiya Consulting, Inc.
新着記事
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html