jQuery リストの順番を入れ替える


Lorem Ipsum

“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”

  • What is Lorem Ipsum?
  • Why do we use it?
  • Where does it come from?
  • Where can I get some?
  • The standard Lorem Ipsum passage, used since the 1500s
  • Section 1.10.32 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC
  • 1914 translation by H. Rackham
  • Section 1.10.33 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC


今回はリストの順番を入れ替える動きをjQueryで実装しました。
jQuery-uiのサイトを見れば、ある程度自由にサンプルを実装できそうです。

コードは以下の通りです。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<h2>Lorem Ipsum</h2>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
<ul id="sortable">
<li>What is Lorem Ipsum?</li>
<li>Why do we use it?</li>
<li>Where does it come from?</li>
<li>Where can I get some?</li>
<li>The standard Lorem Ipsum passage, used since the 1500s</li>
<li>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</li>
<li>1914 translation by H. Rackham</li>
<li>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</li>
</ul>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>

jQuery オブジェクトを掴んで拡大、縮小させる

サイズが変わるよ

シンクロもするよ


今回はWordpressにjQuery-uiのcssを取り込むことに苦労しました。結局、jQueryのcdnからリンクさせることでうまくゆきました。
テーマエディタのhedder.phpに下記のコードを追加することでCSSを反映させることができました。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

コードは以下の通りです。


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</script>
<div id="resizable" class="ui-widget-header">
<p class="ui-state-active">Resize</p>
</div>
<div id="also" class="ui-widget-content">
<p class="ui-widget-header">will also resize</p>
</div>
<script>
$( function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
} );
</script>

jQuery オブジェクトを掴んで(ドラッグして)自由に動かす


自由自在にドラッグすることができます。

自由に動きます

今回は、オブジェクトを掴んで自由に動かす機能をjQueryで実装しました。

jQueryの公式サイトだけを見て実装することができたので、自分としては成長を感じています。只、このオブジェクトを掴んで動かす機能ですが実際のウェブサービスでの利用シーンが浮かばないので今一つ「覚えてやったぜ!」感がありません。まぁ、User Interfaceの使い方を覚えたというだけで十瓶な進歩かと。

コードは以下の通りです。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
<h3>自由自在にドラッグすることができます。</h3>
<div id="draggable" class="ui-widget-content">
<p class="draggText">自由に動きます</p>

jQuery ボタンをクリックしたらテキストをフェードイン、フェードアウトさせる

このテキストはフェードインしたりフェードアウトしたりします。

jQueryでボタンを押下したらテキストがフェイドインしたりフェイドアウトしたりする動きを実装しました。

コードは以下の通りです。


<h3 id="text">このテキストはフェードインしたりフェードアウトしたりします。</h3>
<button id="toggle">トグルします</button>

<script>
$("#toggle").click( function() {
if($("#text").css("display") == "none") {
$("#text").fadeIn("slow");
} else {
$("#text").fadeOut("slow");
}
})
</script>

jQuery クリックしたらオブジェクトを変化させる

WordPressではjQueryが最初から使えると聞いたので、本当に使えるのか試してみました。四角を消すのと円を大きくするのはjQueryで実装しましたが、「元に戻す」ボタンだけはjQueryでどうして良いか分からなかったのでJavaScriptで実装しました。

この四角をクリックしたら消えます。

この円をクリックしたら大きくなります。

元に戻す


チームビルディング日記 -Oracle Master 12c BRONZEが気になってきた-

66Days
今日も、GoogleAppsScriptとSQLとAWSソリューションアーキテクトの勉強を行った。
その中でもSQLの勉強が佳境に差し掛かっており、「スッキリわかるSQL」の終わりが見えてきた。

SQLの勉強を始めたきっかけは、社内で利用しているBiツールを使いこなすためだが、このまま勉強が終わってしまってもなんだかもったいない気がするので、オラクルの資格試験でも受けてみようかと考えている。
そこで、以下の参考書を購入した。

一人で独学だとちょっと自信がないけれど、チームで当たれば、この山も乗り越えられるような気がする。

チームビルディング日記 -AWS認定ソリューションアーキテクト難しいかも-

65Days
今日は、GoogleAppsScriptの勉強とソリューションアーキテクトの勉強を行った。

GoogleAppsScriptの勉強

GoogleAppsScriptは引続き、ドットインストール(dotinstall)で行った。
#08 処理の高速化をしてみよう まで完了した。
JavaScriptの勉強を一年続けたおかげで、今までは、暗記しないと書けなかったコードが、「あれ?ここってこういう書き方だったよね?」って感じで多分こうなはずって感じでコードを書くことができるようになってきている。
今のうちから、GoogleAppsScriptでどんなアウトプットをするか考えるだけで楽しみだ。
勉強が進めば、実装のアイデアもいろいろ出てくると思うのでどんどん勉強を進めたい。

AWSソリューションアーキテクトの勉強

第2章 グローバルインフラストラクチャとネットワークの勉強に突入。
相変わらずAWSの用語は一般ではほとんど聞かない英単語だらけだ。VPC(ヴァーチャルプライペートクラウド)の勉強で相当躓いた。
AWS簡単かも!と思っていたが、少し甘い考えだったかもしれない。
ただ、私も情シスのキャリアが5年程度あり、その中で少なからずAWSのコンソールには触れてきたり、社内のネットワークに関する理解は少なからずあるので、その経験も大きく役立っていて、なんとかついて行ける内容だった。
ネットワークに関する勉強をきちんとしたことがなかったので、今回の認定試験の勉強で、だいぶ理解できるようになりそうだと今からワクワクしてきている。

twitterの仕組みについてもちょっと勉強した

twitterに投稿していると、「フォロワーの増やし方」とかの投稿を見かけるが、「一体何のためにフォロワーを増やしたいのか?」と思っていたのですが、最近、その意味が少し理解できるようになった。それに伴い、せっかくなのでちょっとは効率の良いツイートができるように勉強してみたのだが、twitterの世界は世界で奥が深く面白い。
一通りまとまったらそれはそれで記事にしたいと思った。

今日の勉強のまとめ

毎日勉強できて幸せ!以上!

チームビルディング日記 -google apps script と ソリューションアーキテクトと SQLと-

100DaysOfCode 64日目
今日は勉強盛り沢山でした。

まずはgoogle apps scriptの勉強。

こちらはドットインストールで行いました。
こちらは情報システムチームで行いました。
Google Apps Script入門 全20回のうちの#05まで完了しました。
一年間、チームでコツコツとJavascriptの勉強をし続けてきたおかげで、taguchiさん(dotinstall)の怒涛の責めにもなんとか食らいつくことができました。この調子でGoogle Apps Scriptの勉強を続け、社内の事務仕事を効率化できるようになりたいです。

次は、SQLの勉強。

こちらも情報システムチームで行いました。
ドリル的な勉強はひと段落ついていて、概念の勉強が中心となりました。
具体的には、BEGINで始めて COMMITで一括り(トランザクション)にする方法だったり。

この本は本当に秀逸で、この本一冊でもうそろそろ半年ぐらい勉強していますが、ドリルもあって実際手を動かして理解できるし、概念に関しても丁寧ねにまとめてあったりするのでSQLの勉強を始める方には絶対にオススメします。

次は、AWS認定ソリューション アーキテクト[アソシエイト]の勉強。

こちらはエンジニアチームとの初の勉強会になりました。
教材はこの本を使ったのですが

まだ一章までしか勉強していませんがなかなか良さそうです。

勉強方法として、それぞれがバラバラに勉強した内容を発表し合う方法も検討したのですが、全員で、一つの本を一ページずつ音読する方法を選びました。
個人で本を読むと集中力が続かないことが多いし、気になったところはその都度、チームで内容を確認できるのでおすすめです。

今日の勉強のまとめ

初めてエンジニアの方と一緒に勉強したので、うまくゆくか心配でしたが、良い雰囲気だったのでホットしました。
また、こんなに沢山勉強できる日はなかなかないので今日は大満足でした。

テックアカデミー(TechAcademy)体験記 10日目



こんにちは「しんく」です。
TechAcademyでの勉強、10日目に入りましたので引き続き今日の勉強レポートを記載したいと思います。

学んだ内容はこちら

Lesson6のMysqlの勉強が終わりました。

mysqlからデータベースに接続する方法。

データベースの作成。
テーブルの作成。
テーブルのデータに対するCRUD操作=Create(作成)、Read(取得),Update(更新)、Delete(削除)

WHERE句をつけたCRUD操作

where句をつけることで、全データではなく、条件に一致したテーブル内のデータを操作する方法を学びました。
SELECT,UPDATE,DELETEなどが指定できる。
INSERTはデータの書き込みなので、条件を指定する必要が無いので、出てこない。

ORDER BY句で表示させる順番を変える

これは、データベースの中を書き換えるわけではなく、表示させる時にどのような順番にするかの操作。

集計関数でのデータ分析

COUNT関数、SUM関数、AVE関数。

テーブルの結合とグループ化

ここは正直なところついて行け無かったです。理解がぼんやりとしています。
時間にゆとりがあれば、プロゲートやドットインストールなどでmysqlの課題を深めたいのですが、時間に限りがあるのでここは我慢して次の課題に進みたいと思います。

difff(デュフフ)大活躍

課題を進める中で、自分のタイプミスによる失敗が多発しました。dotinstallの有料会員になると、自分の入力したテキストと課題のテキストを比較する機能がついてきます。テキストだけを比較するサービスは世の中にもあるはずだと思い、「html 比較」 などで検索するとdifffというサイトがヒットしました。こちらにテキストをコピペして比較すると、違っているところに色を付けて教えてくれるので、とても重宝しました。

appear.inというサービスを使ってメンターと面談を行いました。

通常、テレビ電話のサービスですとSkypeの知名度がダントツで、知っている人で、goggleハングアウトぐらいだと思いますが、テックアカデミーでは「appear.in」というサービスを使用してメンターとの面談を行います。同じURLにアクセスするだけでビデオチャットが始められる利点があるようですので、こちらはこちらで使いこなして別の記事で紹介したいと思います。

残り32日。僕は自在にWebアプリケーションを作れる人になるのでしょうか。

テックアカデミー
テックアカデミーを始めてあっという間に32日が経過しました。残すところあと24日なのですが、このタイミングで始めてメンターとの面談がありました。
実は、テックアカデミーの場合、受講期間の開始と共にメンターとの週2回のビデオチャットでの面談が実施されるはずだったのですが、私の場合、運営側の手違いがあったようで、一月経過してようやく面談が行われました。
結構、課題も進んでいるのに、基本的な使い方などの説明もあり、ちょっと笑ってしまいました。そのお詫びと言うことで、終了期間を少し伸ばしてもらえましたので、私としてはかえってラッキーだったかもしれません。
それはさておき、メンターとの面談の感想ですが、「やっぱり人間は良い。」ということです。プログラミングの勉強を自習していると、しょっちゅうハマってしまうことがあり一人で解決策を考えている時間は本当に孤独です。そんな中「メンターに相談できるかも」という思いは随分と心強いです。
チャットでも質問できるのですが、ある程度人間関係ができている人に対して質問できるというのはとてもよいシステムだと感じました。
週二回なんてあっという間なので、「次回までにちゃんと進めなきゃ」という強制力も効果的だと感じています。


テックアカデミー(TechAcademy)体験記 9日目



こんにちは「しんく」です。
TechAcademyでの勉強、9日目に入りましたので引き続き今日の勉強レポートを記載したいと思います。

学んだ内容はこちら

Lesson5のRubyの課題提出が終わりました。

メゾット、オブジェクトの理解が全くできずに思いっきり躓きました。
テキストにも「今は理解できなくてもしょうがない。」的なことが記載されていますのが、本当に理解できませんでした。
これは困ったと思い、一旦、ドットインストールに頼ろうと思い、Ruby入門 (全26回)に手を出したのですが、こちらでもやはりメゾットやオブジェクトに関する部分への理解はできませんでした。ですので、一旦、課題を完了させようと思い、概念の理解は捨ててsinatraやpumaを使って、「Webサイトに用意した入力フォーム」に入力した文字をウェブサイトに表示する作業に入ったところ、またスムーズに課題を進めることができました。

difff(デュフフ)大活躍

課題を進める中で、自分のタイプミスによる失敗が多発しました。dotinstallの有料会員になると、自分の入力したテキストと課題のテキストを比較する機能がついてきます。テキストだけを比較するサービスは世の中にもあるはずだと思い、「html 比較」 などで検索するとdifffというサイトがヒットしました。こちらにテキストをコピペして比較すると、違っているところに色を付けて教えてくれるので、とても重宝しました。

実際の比較したテキスト

テキスト比較
これにより、考え方の間違いなのか、ケアレスミスなのか、はたまたCloud9側の問題なのかをすぐに確認することができるようになりました。
これからも利用しまくると思います。

テラテイルも大活躍

エンジニア用のQAサービスにテラテイルという物があるのですが、こちらにも随分助けられました。ドットインストールで躓いた時にこちらで検索すると大抵、同じところで詰まった人が質問をしていて、適切な回答をもらっていたりします。きっと、テックアカデミーの課題でも質問を上げている人が居るだろうなとおもったら、案の定、全く同じところで、同じ悩みを抱えている人が質問をしていました。おかげさまで秒殺で問題が解決しました。(テックアカデミーのチャットを使うのが本筋だとはおもいますが)
これからも上手に活用させていただきたいと思っています。

残り32日。僕は自在にWebアプリケーションを作れる人になるのでしょうか。

テクアカ
いやー。Rubyの概念に躓いて、Lesson5を完了させるのに9日も要してしまいました。
3連休も全然作業ができなかったので、これから巻き返して行きたいと思います。
まだ一度もメンターとの面談を行っていないので、ちょっと心配になってきました。こちらから自発的に動かないと案内はなさそうですね。この件も進めて行きたいと思います。