javascriptで人気のAlt JSやフレームワークの紹介

Alt JS / トランスパイラ

Alt JSとは、javascriptの抱える問題を解決するために開発されたjavascriptを生成するための中間言語です。

TypeScript

変数を型定義する必要がある静的言語であり、コードが長く複雑化しても意図していない変数の使われ方を防ぐことができるので、中~長期にわたる開発に適しています。

CoffeeScript

コード量の削減と可読性の高さを重視しているため開発期間の短い場合に適しています。

Babel

純粋なJavaScriptコードを記述するツールです。正確にはAltJSではありません。次世代の機能で書かれたコードを、機能に対応していない古いブラウザでも正常に動くコードに変換することができます。

フレームワーク

フレームワークとは、javascriptを開発するうえで必要になる多くの機能をあらかじめ用意し開発スピードを上げるための枠組みです。

React

Facebookが開発を行っているフレームワークです。機能は他のフレームワークと比べて少な目ですが、その分覚えやすいというメリットがあります。

AngularJS

Googleが開発を行っている JavaScript フレームワークです。TypeScripTypetに合わせて作られているため、TypeScriptを使用して開発をするのがおすすめです。

Vue.js

個人プロジェクトとして開発がスタートしたJavaScriptフレームワークです。モダンブラウザを対象として動作するように作られていることが特徴で、レガシーブラウザも対象としている他のフレームワークと比べて動作が軽いメリットがあります。

WAI-ARIAとは

WAI-ARIAとは、Web Accessibility Initiative と Accessible Rich Internet Applicationsの頭文字であり、HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様です。

支援技術が障害を持つ人に対して適切に情報を伝えられるように、ウェブコンテンツのセマンティック情報を定義するためのものであり、ウェブコンテンツやウェブアプリケーションのアクセシビリティと相互的に運用することができる。

・role属性

role属性はコンテンツの役割を明示することができる属性です。

HTMLやSVGのマークアップだけでは役割を明示するのには限界があり、role属性はそれを補うことができます。 あらゆる要素に付与することができるのも便利な点です。

alert

alertは、「警告」などの意味でユーザーに何かメッセージを伝えたい要素に付与します。

status

statusは、alertと同様にユーザーに対するメッセージを表します。alertよりも控えめな役割を表す場合に適しています。

dialog, alertdialog

dialogは、処理を一時的に中断してユーザーに入力や応答を求めるためのものを表す要素に付与します。 alertdialogは、dialogとしての意味を持ちながら、ユーザーに対して警告を与えるalertとしての意味ももつ場合に使われます。

navigation

navigationは、ナビ要素に付与します。

search

searchは、検索フォームになどの要素に付与します。

main

mainコンテンツの要素に付与します。

complementary

asideなどのようなmainと分離する要素に付与します。

contentinfo

copyrightなどを含む要素(主にフッターなど)に付与します。

・aria属性

aria属性は要素の性質や状態を明示することができる属性で、role属性における役割にさらに詳細な情報を与えることができます。

aria属性は、メニューが開いているのか、閉じているのか、などのような動的コンテンツにおいて重要な働きをします。

状態を明示するためのarea属性の多くは、trueまたは、falseの属性値を指定します。

性質を明示するためのaria属性は、属性値にIDや数値または真偽値を指定します。

対応ブラウザ

Firefox

3.0 以降

Chrome

Safari

4 以降

Opera

9.5 以降

Internet Explorer

8 以降

取り入れるべきか

付与できる要素すべてに取り入れればいいという訳ではありません。 情報が多くなりすぎてしまうことで逆に複雑になってしまうこともあるので、セマンティック要素で賄える部分は要素を正しく使い、 WAI-ARIAはアクセシビリティなコーディングをするための補助的な存在として活用するのが良いでしょう。

画像のホバーエフェクトまとめ

html
<figure>
  <img src="images.jpg" />
</figure>
・画像の拡大 デモ
figure img {
  width: 100%;
  transform: scale(1);
  transition: 0.5s;
}

figure:hover img {
  transform: scale(1.3);
}
・半透明 デモ
figure img {
  width: 100%;
  opacity: 1;
  transition: 0.5s;
}

figure:hover img {
  opacity: 0.5;
}
・スライド デモ
figure{
  width:400px;
  position: relative;
  overflow: hidden;
}

figure img {
  width: 100%;
  opacity: 1;
  vertical-align: top;
}

figure:after {
  content: "";
  display: block;
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.6);
  transition: 0.5s;
}

figure:hover:after{
  top: 0;
}
・影(内側) デモ
figure{
width:400px;
}

figure img {
width: 100%;
vertical-align: top;
position: relative;
z-index: -1;
}

figure:hover{
box-shadow: inset 0 0 10px 10px rgba(0,0,0,0.4);
}
・影(外側) デモ
figure{
width:400px;
}

figure img {
  width: 100%;
  opacity: 1;
  vertical-align: top;

}

figure img:hover{
  box-shadow: 0 0 10px 10px rgba(0,0,0,0.4);
}

javascriptで要素の表示非表示を交互に行う

・html
<div class="information">

  <div class="post">
    <div class="post-date">2017.8.14</div>
    <div class="post-title">記事のタイトル1</div>
  </div>

  <div class="post">
    <div class="post-date">2017.9.24</div>
    <div class="post-title">記事のタイトル2</div>
  </div>

</div>
・css
.information{
  width: 360px;
  height: 40px;
  margin: 300px;
  position: relative;
  background-color: #b57f18
}

.post{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  opacity: 0;
  white-space: nowrap;
  transition-duration: 3s;
}

.post.active{
  opacity: 1
}

.post-date,
.post-title{
  display: inline-block;
}
・script
$(function(){
  var ticker = $('.information');
  var li = ticker.children('.post');
  var i = 0;
  add();
  function add(){
    console.log(i)
    li.removeClass('active');
    li.eq(i).addClass('active');
    i++;
    if(i == li.length){
      i = 0;
    }
  }
  setInterval(function(){
    add();
  },3000);
})

マウスが乗っている要素のみに詳細情報を表示する

・html
<div class="blog">

  <div class="post">
    <div class="post-info">
      <div class="post-date">2017.8.17</div>
      <h3 class="post-title">記事のタイトル1</h3>
    </div>
  </div>
  <!--
  -->
  <div class="post">
    <div class="post-info">
      <div class="post-date">2017.9.24</div>
      <h3 class="post-title">記事のタイトル2</h3>
    </div>
  </div>

</div>
・css
.blog{
  width: 640px;
}

.post{
  width: 50%;
  height: 240px;
  background-color: #075470;
  display: inline-block;
  position: relative;
  border-left: 1px solid #092852;
  box-sizing: border-box;
}

.post:hover .post-info{
  display: block;
}

.post-info{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  display: none;
}

.post-date{
  font-size: 14px;
}

.post-info h3{
  margin: 0
}

サムネイルとテキストが横並びのプロフィールのデザイン

・html
<div class="profile">

  <div class="thumbnail">
    <img src="./images/cake.jpg">
  </div>

  <div class="author">
    <div class="name">山田花子</div>
    <div class="work">株式会社ABC</div>
  </div>

</div>
・css
.thumbnail,
.author{
  display: inline-block;
  vertical-align: middle;
}

.thumbnail img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.author{
  padding: 0 10px;
}

.name{
  font-size: 24px;
  font-weight: 600;
}

.work{
  font-size: 14px;
}

WordPressオリジナルテーマの基本

フォルダを1つ作り、その中に[functions.php],[index.php],[style.css]を作ります。

[functions.php]

ワードプレスに機能を追加していくためのファイルです。
//カスタム投稿タイプの追加
add_action( "init", "create_post_type" );
function create_post_type() {
  register_post_type( "news", // 投稿タイプ名の定義
    array(
      "labels" => array(
        "name" => __( "information", "my_theme"), // 表示する投稿タイプ名
        "singular_name" => __( "information", "my_theme"),
      ),
     "supports" => array('title','editor','thumbnail'), //アイキャッチ画像機能の追加
     "public" => true,
     "menu_position" =>5, //メニューバーの表示順
    )
  );
}
//サイドバーの追加
register_sidebar(array(
  'id' => 'sub-content', //サイドバーのid
  'name' => __( 'Sidebar1'), //サイドバー名の定義
  'description' => __( 'The first (primary) sidebar.'), //ウィジェット管理画面で表示するサイドバーの説明
  'before_widget' => '<div id="%1$s" class="widget %2$s">', //ウィジェットに付加するタグ
  'after_widget'  => '</div>',
  'before_title' => '<h4 class="widget-title">', // ウィジェット内の要素に付加するタグ
  'after_title' => '</h4>',
));
//翻訳機能の追加
function my_theme_setup(){
  add_theme_support('post-thumbnails');
  load_theme_textdomain( 'my_theme', get_template_directory() . '/languages' );
}

[index.php]

サイトのトップページにあたるファイルです。 ここに要素を呼び出していきます。

//サイト名の呼び出し
<?php bloginfo('name'); ?>

//サイト説明の呼び出し
<?php bloginfo('description'); ?>

//記事タイトルの呼び出し
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

//投稿日時の呼び出し
<?php echo get_the_date(); ?>

//著者名の呼び出し
<?php the_author(); ?>

//カテゴリの呼び出し
<?php the_category(', '); ?>

//本文の呼び出し
<?php the_content(続きを読む); ?>
実際に投稿記事を呼び出す場合にはループ処理を行う必要があります。 whileからendwhileのループの中で呼び出しを行うことで、記事1のタイトル~本文、記事2のタイトル~本文というようにすべての記事を呼び出すことができます。
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <?php echo get_the_date(); ?>
  <?php the_author(); ?>
  <?php the_category(', '); ?>
  <?php the_content(続きを読む); ?>
<?php endwhile; endif; ?>

[style.css]

//必須表記
/*
Theme Name: SampleTheme
Author: SampleUser
Author URI: http://●●●.com
Description: サンプルのテーマ
Text Domain: my_theme
*/

ライセンスの種類

GPL 著作権表示を保持しなければならない。 無保証(責任は使用者)。 自由に複製、改変、頒布可能。 GPLライセンスにしなければならない。   ・MIT 著作権表示を保持しなければならない。 無保証(責任は使用者)。 自由に複製、改変、頒布可能。   ・Apache License V.2.0 著作権表示の保持、変更箇所の明示が必須。 自由に複製、改変、頒布可能。 無保証(責任は使用者)。   ・BSD 著作権表示を保持しなければならない。 無保証(責任は使用者)。 自由に複製、改変、頒布可能。   ・Public Domain 著作権の期限が切れたり、権利の所有者が著作権を放棄したもの。   ・LGPL 著作権表示を保持しなければならない。 無保証(責任は使用者)。 自由に複製、改変、頒布可能。   ・Creative Commons 著作権物全般に適用できるライセンス 現著作権者のクレジットを明記しなければならない。 営利目的で仕様してはいけない。 複製、改変してはいけない。 複製、改変した場合は元と同じ快諾条件でのみ頒布してもよい。   上記の内容は執筆日時時点での内容となります。 正確な内容は各リンク先でご確認ください。

代表的なWordPressのstarter Theme

starter Thema(ブランクテーマ)とは、WordPressのデザインを作るにあたって、基本的な骨組みのみ用意されている状態からデザインを製作するためのテンプレートです。 今回はその中でも人気のある3つのテーマを紹介します。   ・bones bonesはブランクテーマの中でも特に人気の高いテーマです。 初期状態からレスポンシブに対応しており、ある程度デザインも出来上がっているのでカスタマイズしやすくなっています。 SassとLessが利用できるのも高評価です。   ・HTML5 Blank HTML5 Blankはbonesやstingerと比べて、よりシンプルでカスタマイズ性の高いテーマです。 レスポンシブも初期状態では対応していないので必要であれば自分で導入する必要あります。   ・Underscores UnderscoresもHTML5 Blank同様にレスポンシブに対応しておらず、デザインはほとんどまっさらな状態のカスタマイズ性の高いテーマとなっています。   ・導入方法 上記の3つのテンプレートはZIPファイルをダウンロードしてWordPressに直接アップロードするだけで導入できるのでとても簡単です。  

Doctrineについて

・Doctrineとは SQLを記述せずに、オブジェクト指向でデータベースを操作することが可能となるものです。   ・ORMとDBAL ORMは「Object Relational Mapping」の略で、関係データベース(RDB)とオブジェクト指向を繋げて直観的に操作することを目的としたものです。 DBALは「Database_ Abstraction Layer」の略で、抽象的な指示で動作を呼び出すことを目的としたものです。   ・queryBuilderの準備
$qb = $app['db']->createQueryBuilder();
・SELECT
$qb->select('カラム')->from('テーブル','エイリアス');

"SELECT カラム FROM テーブル エイリアス"
  ・INSERT
$qb->insert('テーブル');

"INSERT INTO テーブル VALUES()"
  ・UPDATE
$qb->update('テーブル');

"UPDATE テーブル"
  ・DELETE
$qb->delete('カラム')->from('テーブル','エイリアス');

"DELETE * FROM テーブル エイリアス"
  ・Join
$qb->leftJoin('エイリアス1', 'テーブル2', 'エイリアス2', 'エイリアス2.カラム = エイリアス1.カラム');

テーブル2 エイリアス2 ON エイリアス2.カラム = エイリアス1.カラム
  ・WHERE
$qb->andWhere(
 $qb->expr()->orx(
  $qb->expr()->like('カラム1', ':keyword' . keyword0),
  $qb->expr()->like('カラム2', ':keyword' . keyword1)
 )
);

WHERE ((カラム1 LIKE :keyword0) OR (カラム2 LIKE :keyword0)) AND ((カラム1 LIKE :keyword1) OR (カラム2 LIKE :keyword1))
  ・GROUP BY
$qb->groupBy('エイリアス.カラム');

GROUP BY エイリアス.カラム
  ・ORDER BY
$qb->orderBy('エイリアス.カラム', 'DESC');

ORDER BY エイリアス.カラム DESC(ASC)
  ・LIMIT, OFFSET
$qb->setMaxResults(3);

LIMIT 3

$qb->setFirstResult(0);

OFFSET 0
  ・VALUES
$qb->values(
 arrey(
  'name' => '?',
  'password' => '?'
 )
)
$qb->setParameter(0, $name)
$qb->setParameter(1, $password)
  ・setValues
$qb->setValue('name', '?')
$qb->setValue('password', '?')
$qb->setParameter(0, $name)
$qb->setParameter(1, $password)