ページの表示速度で気をつけている a-blog cms の「画像サイズ」と「モジュールの実行時間」について | mkasumi.com
この記事は a-blog cms Advent Calendar 2017 の3日目の記事です。 以前案件で、a-blog cms を使って簡単な特設サイトを大量生産できるテーマを作ったのですが、この記事ではそのときに行ったページ速度の改善方法について共有したいと思います。 私はページ速度の改善の専門家ではありませんので、普段から専門知識を屈してページ速度を改善しているというわけではありません。そんな私が最低限意識しているのが、画像サイズとモジュールの実行時間の2つです。 画像サイズについて モジュールの実行時間について ページ速度の観点から言えるCMSの困りどころとしては、クライアントがカメラで撮った大きいサイズの写真を加工せずにアップロードできることです。大きいサイズの写真を加工せずにアップロードすれば何が起こると思いますか？ 訪問者が画像の読み込みを待たされてしまいます。もし、ページ
SaCSS Special 13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTEND に登壇しました | 活動 | mkasumi.com
8月5日に開催された SaCSS Special 13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTENDに登壇しました。まさかSaCSSのSpecialでお話ができる日がくるとは思いもしていなかったので、当日がとても楽しみでした！ 主催者のハムさんからお話をいただいたときに、「ゆるふわで」とせっかく言っていただいたので、いつもとは違った感じにしようと思い、私が現在持ってる「ゆるふわ」を全力投球しました（普段（特にa-blog cms や、一度も行ったことがない地域で）はもう少し真面目なスライドを作っています）。 さて、今回は主に2つの方に向けてお話しました。 デザインルールの存在を知らなかった方 もう少し発展したスタイルガイドを作りたい方 スライドではデザインルールの存在を知らなかった方を中心にお話ししました。そもそもドキュメントを作る理由がわからなければお話を理解
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
a-blog cmsに登録されたテキストの置換を効率よく行うための小ネタ | mkasumi.com
こちらの記事は a-blog cms Advent Calendar 2016 の2日目の記事です。 たとえば、「製品名の名前が変わったので、サイト内に載っている製品名をすべて書き換えたい」、「リンク先が変わったので、サイト内に掲載しているリンク先を書き換えたい」などの要望をお客さんから受けたことはありませんか？ コンテンツが数ページであれば困りませんが、コンテンツ量が多いサイトでは困ることが多いのではないかと思います。
「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com
2016年9月23日（金）に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。 今回お話しした理由 今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。 私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので（開発環境、作業効率、メンテナンス性などなど）、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし
変数をブロックの外でも使えるようにできる a-blog cms のsetRenderedの使い方 | mkasumi.com
Ver.2.6.0から新しくテンプレートの変数化という機能が追加されました。今回の記事はテンプレートの変数化の機能の1つ、「setRendered」についてです。 もしテンプレートの変数化をまだご存知ない方は公式サイトのドキュメントをご覧ください。（※この記事ではsetRenderedを使うメリットをご紹介していますが、使い方については説明していません。使い方を知りたい場合は公式ドキュメントをご覧ください） テンプレートの変数化 | テンプレート | ドキュメント | a-blog cms 制作者向け情報 テンプレートの変数化の機能の話を他の製作者の方にすると、setTemplateは大体理解してもらえるのですが、なかなかsetRenderedの使いどころがぱっと思いつくことが難しいようで、私もはじめて機能ができたとき、どういったときにsetRenderedを使えばいいのかわかりませんでし
CMSMix Sapporo でa-blog cmsセッションのスピーカーとして登壇しました | セミナー | mkasumi.com
先日、2月27日（土）に行われた、CMSMix Sapporo 〜Web制作の幅が広がる！プロジェクトの傾向から考える、2つ目・3つ目のCMS選び〜 という5つのCMSのセッションが聞ける勉強会で、a-blog cms のセッションのスピーカーとして登壇しました。 CMSMix Sapporo について CMSMix Sapporoは、株式会社ジャクスタポジションの西山さんが主催しているセミナーで、WCAN で登壇された Webbing Studio 口田聖子さん のスライドを主催者の西山さんが見たことが開催のきっかけになったそうです。 a-blog cms のセッションについて サブタイトルが「2つめ・3つめのCMS選び」ということだったのですが、私は実際 a-blog cms しか制作案件で使うことがないので初めはどうしようかと思いました。今回は、その部分は基調講演の口田さんに任せて、
コーダー目線で考えるa-blog cmsで行うCMSプロトタイピングについて | mkasumi.com
これは、 a-blog cms Advent Calendar 2015 の1日目の記事です。 最近、CMSプロトタイピングの手法を使ってで案件を進めることが多くなってきています。そのCMSプロトタイピングを実際やってみて、コーダー(実装側)の作業がどう変わったのかご紹介したいと思います。 CMSプロトタイピングとは CMSプロトタイピングとは、先にCMSを実装し、コンテンツを流し込み、コンテンツ量を見ながら、最適なデザインや提案をしていく考え方のことです。例えば、「思っていたよりコンテンツ量が少なくてこのデザインは使えないので修正してください」なんてことを少なくすることができます。 コーディング側のメリット 上記のCMSプロトタイピングの説明では、コーダーにメリットが無いように感じますが、デザインの出戻りが少なければ、コーディング側の修正も少なくなりますし、制作ワークフローが変わるところ
a-blog cms の Unit_List のおすすめの使いかた | mkasumi.com
ユニットリストのおすすめの使い方 a-blog cms のビルトインモジュールユニットリストのおすすめの使い方を紹介しています。 ユニットリストはVer.2.0からだいぶ機能が増え、利用している方も少ないのではないかなと思い、お話... 全体的に Unit_List の利用数は少ないんじゃないかと思ったから 全体的に Unit_List の利用数は少ないんじゃないかとは思っており、発表しようとは思ったのですが、会場で聞いてみると4人の方の手が挙がりました。a-blog cms の中でもパワーユーザーの方が集まるイベントなんですが、そのイベントでもやはり Unit_List は利用数が少ないことがわかりました。 そもそも Unit_List とは ビルトインモジュールの1つで、現段階では Entry_Body 以外で唯一ユニットを表示できるモジュールです。Entry_Body と違うところは
2015年のacms.cssについて考えてみる | mkasumi.com
これはa-blog cms Advent Calendar 2014の13日目の記事です。 私は、いわゆるa-blog cmsの中の人にあたるのですが、中でも最近考えているのが2015年版テーマとacms.cssについてです。特にacms.cssのこれからについてどうしようかなと考えていたりします。 2日目の勝又さんの記事にあるように、ありがたいことに、acms.cssは思っていたよりも多くの方に使っていただいているようで嬉しいです！そんなユーザーさんにもよく使われているacms.cssの現状を共有できたらいいかなと思いました。 現状考えている大きな変更点は以下の2つです。 Media Queriesの基本の指定の仕方をmin-widthに変更したい CSSプリプロセッサー周りの管理の仕方を強化する Media Queriesの基本の指定の仕方をmin-widthに変更したい お使いいただ
入社2年目マークアップエンジニアの情報の集め方 | 活動 | mkasumi.com
2014.10.22 | 活動 入社2年目マークアップエンジニアの情報の集め方 アップルップル公開社内勉強会で「入社2年目 マークアップエンジニアの情報の集め方」というタイトルで発表しました。 今回は初めてGoogleスライドを使ってみました。 入社2年目 マークアップエンジニアの情報の集め方 SlideShareにもアップしてみました。お好きなほうでご覧ください。 情報収集はWeb制作者には欠かせないスキル 入社1年目のとき、新人の入る隙は情報収集だと思ってがんばっていたのですが、入社2年目にして先輩が退職されるというまさかの展開にまた情報収集をがんばることになりました。 どの立場にしろ、情報収集は大事だなあと実感した今、公開社内勉強会という場を借りて新人さん2人に向けてお話ししてきました。 お話の内容 情報収集の大切さ 新しい情報を収集する すでに浸透している情報を収集する 情報を発信
正式版のBootstrap3で個人的に覚えておきたいところ | メモ | mkasumi.com
数ヶ月前にBootstrap3が正式にリリースされました。RCから正式リリースまで早かった気がしましたが、Bootstrapの2歳の誕生日に合わせてたんですね。 Bootstrap 3 released · Bootstrap Blog それでは今回は前回ご紹介したBootstrap3 RC1 変更点まとめには書いていなかった、Getting started · Bootstrapのページで私が覚えておきたいところをメモしていきます。 また英語の勉強も兼ねての記事になりますので、間違っているところがあれば教えていただけると嬉しいです。 気になる新しいテーマ Grids Non-responsive Bootstrap Bootstrap theme Grids Bootstrap3ではグリッドシステムが大きく変更しました。 クラスの書き方もそうですし、2.3.2のときはスマートフォンのとき
Bootstrap3 RC1 変更点まとめ | mkasumi.com
先日、a-blog cmsのBootstrapテーマを配布した(Bootstrapテーマの配布について)にも関わらず、Bootstrap3 RC1が公開されました。 そこで、Bootstrap3 RC1で何が変わったのかを調査したいと思います！ RC1ってなに？ 販売(Release)の候補(Candidate)となる完成により近い開発バージョンのことで、以降完成度が上がるに従ってRC1、RC2、RC3……と数字が大きくなっていく。この最終バージョンをRTMと呼ぶ。 デジタル用語辞典 より 進化する可能性があるってことですね。β版みたいな感じでしょうか。ちなみに、CustomizeのページはRC2になるまで公開されないようです。 変更点 大きなところ モバイルファースト モバイルでも1カラム以上にすることができる iconのフォルダがデフォルトで入ってない（Glyphiconsから入手
グリッドシステムをa-blog cmsのユニットグループに使用する | サイト制作 | mkasumi.com
グリッドシステムをa-blog cmsに使おうと思ったのは、会社でBootstrapのテーマを作るように言われた事がきっかけです。実はユニットグループではBootstrapのグリッドシステムを使う事ができなかったのですが、ここではBootstrapのテーマを作る上でとくに頑張ったユニットグループとグリッドシステムについて書きます。 さきほども書いたのですが、Bootstrapのグリッドシステムはa-blog cmsのユニットグループと考え方が違ったため、無理矢理使わず、自分で新しいものを作りました。 参考にしたグリッドシステム Bootstrapのグリッドシステムが使えないとわかったとき、他のグリッドシステムを探す事から始めました。なかなかa-blog cmsと仲良くやってくれそうなグリッドシステムがなかったのですが、数多くあるグリッドシステムの中でもSimple Gridという違うグリ
a-blog cmsで使う基本的なカスタムフィールドについて | サイト制作 | mkasumi.com
カスタムフィールドについてちょっとわかってきたので自分用にメモします。 ここで記述しているのはa-blog cmsのカスタムフィールドです。 カスタムフィールドとは カスタムフィールドはフォームに変数を指定し、表示したいテンプレートに同じ変数を書く事で、フォームに入力したものを出力することができます。 カスタムフィールドを使うとa-blog cmsでできることが増えるので、これからa-blog cmsを使う方は勉強しておいて損はしないと思います。 カスタムフィールドの書き方 カスタムフィールドには普通のカスタムフィールドと、カスタムフィールドグループがあります。ここではテキストとテキストエリアの書き方を紹介します。 普通のカスタムフィールド <table class="entryFormTable"> <tr> <th>テキスト</th> <td> <input type="text"
a-blog cmsの「post include」機能に初挑戦しました | mkasumi.com
post includeとは post includeとは、a-blog cmsの機能の一部です。a-blog cmsのフォーム送信後の結果を、ページを移動せずにAjaxを使用して表示することができます。 送信ボタンを押して検索結果を表示するpost includeのサンプル 送信ボタンを押さずに検索結果を表示するpost includeのサンプル post includeの書き方 post includeには２つのファイルが必要です。 表示したい中身のみのHTMLファイル 表示させるテンプレートのHTMLファイル 表示したい中身のHTMLの書き方 サンプルでは、「searchResult.html」というファイルを用意し、モジュールIDは「searchResult」にしました。 <!-- BEGIN_MODULE Entry_List id="searchResult" --> <ul>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSセレクタで最後の要素が奇数だったときを指定する | メモ | mkasumi.com
お探しのページは見つかりませんでした | mkasumi.com
WCAN2013 SummerでLTしてきました | mkasumi.com