最新のJavaScript チュートリアル

2018年の年始に見つけた JavaScript チュートリアルのサイト。

javascript.info

1つ1つのネタはちらばっていますが、まとまって最新のJavaScriptに関して書かれているサイトはあまりありませんでした。 なので、これは良い!と思い、翻訳をさせてもらっています。 ついに、先日 2/3 が終わったところで公開していただけました。

ja.javascript.info

まだ道半ばなので翻訳にご協力いただける方はお願いします :)

Web開発者になるためのロードマップ 2017年版

GithubでたくさんStarがついているのに知らなかった・・・

github.com

かれこれ数年Webアプリを開発してますが、色々な技術がどんどんでるので

  • 今流行ってるのはなんだろう
  • 他にはどんなFWがあるんだろう

とか思いながら日々やってます。

冒頭のサイトではWeb開発者(フロントエンド、バックエンド、DevOps)になるための技術要素がわかりやすくまとまっています。 下記はその一部です。

https://camo.githubusercontent.com/989b5d78efe42fefa78f26443f146d027dcfb9b0/68747470733a2f2f692e696d6775722e636f6d2f6a7a3478726c512e706e67

仕事で使っているも付近の要素はだいたい知っていたので一安心。 その反面知らないもの多いなーと思い勉強不足を反省。。

今は仕事のやり方的に、フロントもバックも全部やってる感じなんですが、世の中はどっちかを選んで専門になるってケースが多いのかな〜。

BootStrap

早くから名前は聞いたことはあったのですが、ふとしたきっかけから最近勉強してみました、Bootstrap。

もっと早く手を動かすべきでした、便利すぎてびっくり。

普段仕事でクライアントサイドの開発をすることが多いのですが、いかに非効率にプリミティブなところをあれやこれやとやっていたのか、ということを思い知らされました。。

知らないって罪ですね。 このご時世とくにそれを感じます。

Bootstrapの中身については、ここで色々書くよりもドットインストールなど概要を見たり実際に触ってみる方が確実なので手抜きですがリンクだけ。

Bootstrap 3.0入門 (全18回) - プログラミングならドットインストール

youtubeの動画再生

激務に追われてましたが、久々にSwiftを触ることができました。

本日は Swift で動画(youtube)の再生にトライです。

ざっと調べた感じだと再生の仕方は次の3通りあるみたいです。

  • UIWebViewを使う(一番簡単!)
  • MPMoviePlayerController を使う
  • AVPlayer を使う

今回は上2つです。

UIWebView を使う

UIWebView での再生は動画の埋め込みですね。さくっと書くとこんな感じです。

        var url = NSURL.URLWithString("https://www.youtube.com/embed/We3uAyJJ9Fo?feature=player_detailpage&playsinline=1")
        var urlRequest: NSURLRequest = NSURLRequest(URL: url)
        self.webview.allowsInlineMediaPlayback = true;
        self.webview.loadRequest(urlRequest)

ちなみにしれっと出てきましたが、「playsinline=1」は動画再生時に全画面にならないようにするために必要みたいです。 知ってると便利ですね。

MPMoviewPlayerCOntroller を使う

標準で提供されている動画のPlayerです。使う場合はimportしてやる必要があります。

import MediaPlayer

この場合、youtubeを再生するには単純にURLを指定するだけではNGで、ちょっと小細工が必要になります。 具体的には srcとなるURL から再生用のURLを取得する必要があります。

今回は、HCYoutubeParser というライブラリを使用しました。

hellozimi/HCYoutubeParser · GitHub

cocoapodsにも登録されているので、Podfileでのインストールが可能です。 Objective-Cなので、インストール後は bridge-headerファイルに

#import "HCYoutubeParser.h"

としてやればOKです。あとは、

        var srcUrl = NSURL.URLWithString("https://www.youtube.com/embed/We3uAyJJ9Fo?feature=player_detailpage&playsinline=1")
        var dict = HCYoutubeParser.h264videosWithYoutubeURL(srcUrl)
        var url = NSURL.URLWithString(dict["medium"] as NSString)
        moviePlayer = MPMoviePlayerController(contentURL: url)
        moviePlayer.view.frame = CGRect(x: 20, y: 100, width: 200, height: 150)
        self.view.addSubview(moviePlayer.view)

と言った感じで、ライブラリを利用してURLをを取得し、MPMoviePlayerController に渡してやれば出来上がりです。 iOS8 でもちゃんと動作しました。

何かアプリが作れそうな気がしてきますね!

CoreDataのメモ その2〜swift版

今回はSwiftでCoreDataを使う場合のメモです。

基本の部分は以前のObjective-Cでの記事と同じです。

利用方法ですが、

  • xcdatamodeldを作成する

    CoreDataを使う設定でプロジェクトを作ると自動的に出来上がっています。 もちろん後から追加することも可能です。 作成後は、Objective-Cと同様の操作で、Xcodeからエンティティの作成とNSManagedObjectのサブクラスとの関連付けができます。

  • NSManagedObject を継承したサブクラスの作成

    こちらも新規ファイル作成から作ることができます。 サンプル的な感じですがこれで動くことは確認できました。

import Foundation
import CoreData

@objc(Hoge)
class Hoge : NSManagedObject {
    
    @NSManaged var title : String
    @NSManaged var date : NSDate   
}
  • CoreData用の処理群

    CoreDataを利用する設定にしておくと自動で生成されるコードです(AppDelegate)。 後からCoreDataを使う、となった場合は同じようにこのコードを書きます。

    下記は自動生成されるコードです。 一部、hogexxx となっている部分は、xcdatamodeldのファイル名や、sqliteのファイル名なる部分です。ここはプロジェクト毎に違うので適宜変更します。

    // MARK: - Core Data stack
    
    lazy var applicationDocumentsDirectory: NSURL = {
        // The directory the application uses to store the Core Data store file. This code uses a directory named "edu.self.Locations_for_swift" in the application's documents Application Support directory.
        let urls = NSFileManager.defaultManager().URLsForDirectory(.DocumentDirectory, inDomains: .UserDomainMask)
        return urls[urls.count-1] as NSURL
        }()
    
    lazy var managedObjectModel: NSManagedObjectModel = {
        // The managed object model for the application. This property is not optional. It is a fatal error for the application not to be able to find and load its model.
        let modelURL = NSBundle.mainBundle().URLForResource("hogexxx", withExtension: "momd")
        return NSManagedObjectModel(contentsOfURL: modelURL)
        }()
    
    lazy var persistentStoreCoordinator: NSPersistentStoreCoordinator? = {
        // The persistent store coordinator for the application. This implementation creates and return a coordinator, having added the store for the application to it. This property is optional since there are legitimate error conditions that could cause the creation of the store to fail.
        // Create the coordinator and store
        var coordinator: NSPersistentStoreCoordinator? = NSPersistentStoreCoordinator(managedObjectModel: self.managedObjectModel)
        let url = self.applicationDocumentsDirectory.URLByAppendingPathComponent("hogexxx.sqlite")
        var error: NSError? = nil
        var failureReason = "There was an error creating or loading the application's saved data."
        if coordinator!.addPersistentStoreWithType(NSSQLiteStoreType, configuration: nil, URL: url, options: nil, error: &error) == nil {
            coordinator = nil
            // Report any error we got.
            let dict = NSMutableDictionary()
            dict[NSLocalizedDescriptionKey] = "Failed to initialize the application's saved data"
            dict[NSLocalizedFailureReasonErrorKey] = failureReason
            dict[NSUnderlyingErrorKey] = error
            error = NSError.errorWithDomain("YOUR_ERROR_DOMAIN", code: 9999, userInfo: dict)
            // Replace this with code to handle the error appropriately.
            // abort() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
            NSLog("Unresolved error \(error), \(error!.userInfo)")
            abort()
        }
        
        return coordinator
        }()
    
    lazy var managedObjectContext: NSManagedObjectContext? = {
        // Returns the managed object context for the application (which is already bound to the persistent store coordinator for the application.) This property is optional since there are legitimate error conditions that could cause the creation of the context to fail.
        let coordinator = self.persistentStoreCoordinator
        if coordinator == nil {
            return nil
        }
        var managedObjectContext = NSManagedObjectContext()
        managedObjectContext.persistentStoreCoordinator = coordinator
        return managedObjectContext
        }()
    
    // MARK: - Core Data Saving support
    
    func saveContext () {
        if let moc = self.managedObjectContext {
            var error: NSError? = nil
            if moc.hasChanges && !moc.save(&error) {
                // Replace this implementation with code to handle the error appropriately.
                // abort() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
                NSLog("Unresolved error \(error), \(error!.userInfo)")
                abort()
            }
        }
    }
  • 実装

準備ができたので、後は実装です。CoreDataを使うには import をします。

  import CoreData

managedObjectContextを取得します。

var appDel:AppDelegate = (UIApplication.sharedApplication().delegate as AppDelegate)
        self.managedObjectContext = appDel.managedObjectContext

NSFetchRequestを使って、指定したデータを取得するサンプルです。

        var request = NSFetchRequest()
        var entity = NSEntityDescription.entityForName("Hoge", inManagedObjectContext: self.managedObjectContext)
        request.entity = entity
        request.returnsObjectsAsFaults = false;
        let sortDescriptor = NSSortDescriptor(key: "date", ascending: false)
        let sortDescriptors = [sortDescriptor]
        request.sortDescriptors = [sortDescriptor]
        var error: NSError? = nil
        var mutableFetchResults = managedObjectContext?.executeFetchRequest(request, error: &error)
        if (mutableFetchResults == nil) {
            println("fail")
            

CoreDataメモ - その1

CoreDataのメモ(まだまだ理解できておらず現時点の勝手な理解なので間違っていたらすみません)

参考にさせていただいサイトです。

[Objective-C] CoreDataを使う - Qiita

サルでもわかる Core Data 入門【概念編】 - A Day In The Life

エンティティ:

  • 永続化対象のデータのことをこう読んでいる。
  • エンティティはXcodeのxcdatamodeldファイルからGUIで作成することができる。 ここで作ったデータがDBのテーブルに相当するものになる。

右にある図がエンティティです。

f:id:espoirka:20140827200644p:plain

NSManagedObject:

  • モデルクラス
  • Core Data で永続化するオブジェクトは必ずこのクラスのオブジェクトかこのクラスのサブクラスのオブジェクトでなければいけない、とのこと。
  • エンティティで作成したデータと対応するクラスを関連付けることでコード上からデータに対する操作が可能になる。

f:id:espoirka:20140827200805p:plain

エンティティとNSManagedObject の関連付けされてるのがここでわかる。

f:id:espoirka:20140827200957p:plain

NSManagedObjectContext:

  • 処理の実行
  • 検索条件やデータに対する操作リクエストは、NSFetchRequest が担っており、このリクエストを元に実際にデータの検索、挿入更新削除や Undo Redo 処理の実行を行う

NSFetchRequest:

  • 条件の管理
  • データに対する検索条件などのリクエスト情報を管理する。このリクエスト情報をNSManagedObjectContext が実行することで処理が行われる。

NSFetchRequest でリクエスト情報を生成し、NSManagedObjectContext executeFetchRequest で実際にリクエストを投げる例はこんな感じ。

    // 格納したデータのフェッチ
    NSFetchRequest *request = [[NSFetchRequest alloc] init];
    NSEntityDescription *entity = [NSEntityDescription entityForName:@"Event" inManagedObjectContext:managedObjectContext];
    [request setEntity:entity];
    
    NSSortDescriptor *sortDescriptor = [[NSSortDescriptor alloc] initWithKey:@"creationDate" ascending:NO];
    NSArray *sortDescriptors = [[NSArray alloc] initWithObjects:sortDescriptor, nil];
    [request setSortDescriptors:sortDescriptors];
    
    NSError *error = nil;
    NSMutableArray *mutableFetchResults = [[managedObjectContext executeFetchRequest:request error:&error] mutableCopy];

その他にもCoreDataを利用する設定でXcodeでプロジェクトを作ると、色々なクラスが自動生成されています。 それらについてはおいおい勉強します。。

とりあえずCoreDataを手始めに使ってみるのであれば、上記の4つを触ればよいようです。

今CoreDataのチュートリアルObjective-C版でやったので、今度Swift版も作ってみます。

Xcode beta5 から beta6 にしたときのメモ

以前、

Xcode beta3 から beta5 にしたときのメモ - Restful Blog

で、protocol のイニシャライザは required をつけて実装が必要であることを書いたのですが、beta 6 になると実装しなくてもコンパイルエラーが発生しなくなったようです。