Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

いま作っているテーブルユニットについて

これはa-blog cms Advent Calendar 2016の4日目の記事です。
現在、a-blog cms Ver. 2.7 の新しい機能として、テーブルユニットというものを開発しています。
名前を聞いただけで大体どんなものかはピンとくるかもしれません。下のイメージのようにテーブルと書かれたボタンを押すと、テーブルのレイアウトが出現します。そこに直感的に文字入力が行えます。


ボタンを押すと下のようなテーブルのUIが出現して、そのUIに文字などを打ち込んでいくことができます。


「いま作っているテーブルユニットについて」の続きを読む

Team building with your friends

Sometimes, it’s really difficult to make products with friends. Coz you have to make sure that your friends are really committed to working together with you to create things. And even if they are, unless you make some rules with them, maybe your project will run into trouble down the road. So, no matter how good friends you are, it’s still really difficult to do projects together without any plans. In this article, I’ll tell you some tips how to stay motivated not lose interest when working on something together with your friends. The following is a list of things you should do before starting projects in order to stay motivated.

  1. Make sure that you guys are all committed to making the product
  2. Do video chat once a week (Sunday morning)
  3. Make some feasible plans (For example, no more than 2 plans for 1 week)
  4. Make a slack team and a github team

1. Make sure that you guys really want to make that products

It sounds really matter of course but it’s really important to make sure that you guys really want to make that. without it, I’m 100% sure that your plans aren’t going well in the future. and it may affect your friendship with them. So you guys really need to discuss about the products before making it. We use Google Documents while discussing. It’s visible, hence you can easily find some points you can’t agree with.

2. Do video chat once a week

Doing video chat really helps you when it comes to keeping motivation. if alone, you can make excuse to yourself like “how about doing this after watching this movie” or like that. but in front of your friends, you can’t watch movie all of a sudden. so making products while chatting with friends via Skype really helps you a lot.

3. make some feasible plans

While chatting, you guys also have to make feasible plans you have to do by next meeting. We often use Trello to check our plans. And as you can see, We make only 2 tasks in a week.


Why 2? if we make more plans, we may think it as a burden and if you failed to do it by next meeting, it will make your partners down and loose their motivation. That’s why we make really easy and few tasks. And what important is, you can’t make task by yourself. You are allowed to make tasks only when chatting with friends. The reason of this is because if you give someone a free hand to add tasks, the guy will add tasks more and He’ll paint himself into a corner.

4. Make slack team and github team

Finally we have to make sure that we have some environments where we can share our knowledge and share some documents and information. In our case, we use slack for sharing docs and info and use github to maintain our source codes. below is the image which describes how we communicate each other. But don’t take it seriously, only thing you have to do is just share information. so if you find other ways around then It’s ok too.


That’s it Enjoy your coding life with your friends!!


Facebook製のパッケージマネージャーyarnを使ってみた


今巷で話題のJavaScriptのパッケージマネージャー、yarnを使ってみました。ものとしてはほとんどnpmと変わりませんが、npmと比べるとnode_modulesにはいるパッケージの容量の削減と、ダウンロードスピードの向上が図れます。導入方法も思っていたより簡単で下記のようなコマンドをターミナルから入力するだけで簡単にインストールできました。


「Facebook製のパッケージマネージャーyarnを使ってみた」の続きを読む

PostCSSを触ってみた


PostCSSとは

PostCSS、名前を聞いただけじゃどんなものかピンとこないかもしれませんが、そんなに難しいものではありません。SassとかLessとかを使うと、独自の言語ルールで縛られてしまいますし、いらない機能もたくさん読み込まないといけません。PostCSSの場合、自分で好きなルールをpostcssプラグインから選んで読み込み、使用する事ができます。たとえばSassとかLessとかにあるようなfor文やif文なんかは使わなかったりしますよね?必要な機能、たとえばmixinや変数のみなどを取り込んで使う仕組みがPostCSSです。
つまり、PostCSSを使えば、自分オリジナルのPreprocessorを簡単に作れちゃうという事です。

PostCSS導入

たとえば、gulpでpostcssを導入するとするなら以下のような書き方をします。

var gulp = require('gulp');
var postcss = require('gulp-postcss');


gulp.task('css', function () {
	return gulp.src('css/src/**.css')
	.pipe(postcss([
		require("postcss-import"),//@import機能を使いたい
		require('postcss-mixins'),//mixinを利用したい
		require('postcss-nested'),//セレクターのネストをしたい
		require('postcss-simple-vars'),//変数を定義したい
		require('postcss-cssnext'),//次世代のcssの文法を使いたい
		require('cssnano'),//CSSを圧縮したい
	]))
	.pipe(gulp.dest('css/dist/'));
});

gulp.task('default', ['css']);

package.json

{
  "devDependencies": {
    "cssnano": "*",
    "gulp": "*",
    "gulp-postcss": "^6.2.0",
    "postcss-cssnext": "*",
    "postcss-import": "^8.1.2",
    "postcss-mixins": "^5.3.0",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0"
  }
}

githubにサンプルのソースコードを置いていますので、試してみてください。コマンドラインツールよりnpm installで依存パッケージのインストール、gulpでCSSのコンパイルができます。


PostCSSを使う上で注意したい事

PostCSSを使うという事はSassなどLessなど、用意された言語仕様ではなく、自分である程度のルールを決めるということになります。それを社内で導入するとなると、そのルールの周知徹底が必要になってきます。SassやLessなら文法はGoogleで調べればヒットしますが、導入したPostCSSプラグインのルールはすぐに見つからないかもしれません。
なので、すでにSassなどを社内ですでに使っていて、もし新たにPostCSSを使いたいのであれば、最初のうちは、ベンダープリフィックスを付与する、autoprefixerやCSSを圧縮するcssnanoくらいを利用する程度にとどめておく方が無難かもしれませんね。


a-blog cms 勉強会 in 高知 2016/10 を開催しました

高知市文化プラザかるぽーと 中央公民館 9F 第1会議室にて、a-blog cms 勉強会 in 高知 2016/10を開催しました。勉強会を告知した際は参加者が6名ほどしかいなかったのですが、ラスト一週間で急に参加者申し込みが増え、結局15名もの方に参加していただけました。地元高知でこれほど多くの方に参加していただけてとても嬉しいです。


会場の様子


「a-blog cms 勉強会 in 高知 2016/10 を開催しました」の続きを読む

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド